:root {
  --article-splitter-gap: 56px;
  --article-splitter-margin-top: 48px;
  --article-splitter-image-flex: 1 1 calc(50% - var(--article-splitter-gap) / 2);
  --article-splitter-desc-flex: 1 1 calc(50% - var(--article-splitter-gap) / 2);

  --article-features-gap: 32px;
  --article-features-margin-top: 48px;

  --article-feature-flex: 0 1 calc(33.3% - (var(--article-features-gap) * 2 / 3));
  --article-feature-border-radius: var(--border-radius);
  --article-feature-background: var(--main-color-opacity-07) linear-gradient(95deg, var(--accent-color-opacity-02) -7%, var(--accent-color-opacity-06) 70%, var(--accent-color-opacity-20) 102%);
  --article-feature-padding: 16px 24px 24px 24px;

  --article-feature-title-gap: 16px;
  --article-feature-title-font-size: 40px;
  --article-feature-title-line-height: 48px;

  --article-feature-title-before-width: 30px;
  --article-feature-title-before-height: 30px;

  --article-advantages-gap: 32px;
  --article-advantages-margin-top: 48px;

  --article-advantage-flex: 0 1 calc(33.3% - (var(--article-advantages-gap) * 2 / 3));
  --article-advantage-border-radius: var(--border-radius);
  --article-advantage-background: var(--main-color-opacity-07) linear-gradient(95deg, var(--accent-color-opacity-02) -7%, var(--accent-color-opacity-06) 70%, var(--accent-color-opacity-20) 102%);
  --article-advantage-padding: 24px;

  --article-advantage-image-margin: calc(-1 * var(--article-advantage-padding));

  --article-advantage-title-font-family: var(--main-font);
  --article-advantage-title-font-size: 18px;
  --article-advantage-title-font-weight: 700;
  --article-advantage-title-line-height: 24px;
  --article-advantage-title-margin-top: 24px;

  --article-advantage-description-margin-top: 8px;

  --article-aspects-gap: 16px;
  --article-aspects-border-radius: var(--border-radius);
  --article-aspects-margin-top: 48px;

  --article-aspect-border: 1px solid var(--main-color-opacity-15);
  --article-aspect-border-radius: var(--border-radius);
  --article-aspect-background: var(--main-color-opacity-15);

  --article-aspect-element-gap: 8px;
  --article-aspect-element-background: var(--accent-color);
  --article-aspect-element-color: var(--accent-color-30);
  --article-aspect-element-padding: 10px 14px;

  --article-aspect-option-background: var(--accent-color);
  --article-aspect-option-font-weight: 700;
  --article-aspect-option-color: var(--accent-color-30);
  --article-aspect-option-padding: 10px 14px;

  --article-aspect-value-padding: 10px 14px;
}



.article__splitter {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: var(--article-splitter-gap);
}
.article__splitter:nth-child(2n + 2) {
  flex-direction: row-reverse;
}
.article__splitter + .article__splitter {
  margin-top: var(--article-splitter-margin-top);
}

.desc.article-splitter__desc {
  flex: var(--article-splitter-desc-flex);
  width: 100%;
}

.image.article-splitter__image {
  flex: var(--article-splitter-image-flex);
  width: 100%;
}

.image.article-splitter__image img {
  width: 100%;
}

.article h2 {
  text-align: center;
}



.article__features {
  display: flex;
  gap: var(--article-features-gap);
  margin-top: var(--article-features-margin-top);
}

.article__feature {
  display: block;
  position: relative;
  flex: var(--article-feature-flex);
  border-radius: var(--article-feature-border-radius);
  background: var(--article-feature-background);
  padding: var(--article-feature-padding) !important;
  margin: 0 !important;
}
.article__feature:before { display: none !important; }

.article-feature__description {
  margin-top: 8px !important;
}

.title.article-feature__title {
  display: flex;
  align-items: center;
  gap: var(--article-feature-title-gap);
  font-size: var(--article-feature-title-font-size);
  line-height: var(--article-feature-title-line-height);
}
.title.article-feature__title:before {
  content: '';
  display: block;
  position: relative;
  width: var(--article-feature-title-before-width);
  height: var(--article-feature-title-before-height);
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjEyODggMEM2Ljc4NTM3IDAgMCA2Ljc4NTMxIDAgMTUuMTI4OEMwIDIzLjQ2NzYgNi43ODUzNyAzMC4yNTc3IDE1LjEyODggMzAuMjU3N0MyMy40Njc2IDMwLjI1NzcgMzAuMjU3NyAyMy40Njc1IDMwLjI1NzcgMTUuMTI4OEMzMC4yNTc3IDYuNzg1MzEgMjMuNDY3NiAwIDE1LjEyODggMFpNMTUuMTI4OCAyOS41NDNDNy4xODA4NiAyOS41NDMgMC43MTQ2OTUgMjMuMDc2OCAwLjcxNDY5NSAxNS4xMjg4QzAuNzE0Njk1IDcuMTgwODYgNy4xODA4NiAwLjcxNDY5NSAxNS4xMjg4IDAuNzE0Njk1QzIzLjA3NjkgMC43MTQ2OTUgMjkuNTQzIDcuMTgwOCAyOS41NDMgMTUuMTI4OEMyOS41NDMgMjMuMDc2OSAyMy4wNzY5IDI5LjU0MyAxNS4xMjg4IDI5LjU0M1oiIGZpbGw9IiM2REZGRkQiLz4KPHBhdGggZD0iTTE1LjEyODkgNC43MzYzM0M5LjM5NjU4IDQuNzM2MzMgNC43MzY0IDkuMzk2NSA0LjczNjQgMTUuMTI4OEM0LjczNjQgMjAuODU2MyA5LjM5NjU4IDI1LjUyMTIgMTUuMTI4OSAyNS41MjEyQzIwLjg1NjQgMjUuNTIxMiAyNS41MTY2IDIwLjg1NjMgMjUuNTE2NiAxNS4xMjg4QzI1LjUxNjYgOS4zOTY0NCAyMC44NTY0IDQuNzM2MzMgMTUuMTI4OSA0LjczNjMzWk0xOS44MzY3IDE1LjMzODRMMTUuNDE0OCAyMS4zMjMzQzE1LjI3MTggMjEuNTE4NiAxNC45ODExIDIxLjUxODYgMTQuODM4MiAyMS4zMjMzTDEwLjQyMSAxNS4zMzg0QzEwLjMyNTcgMTUuMjE0NiAxMC4zMjU3IDE1LjA0MyAxMC40MjEgMTQuOTE0NEwxNC44MzgyIDguOTM0MjhDMTQuOTc2NCA4Ljc0ODQ3IDE1LjI4MTMgOC43NDg0NyAxNS40MTQ4IDguOTM0MjhMMTkuODM2NyAxNC45MTQ0QzE5LjkzMiAxNS4wNDMgMTkuOTMyIDE1LjIxNDYgMTkuODM2NyAxNS4zMzg0WiIgZmlsbD0iIzZERkZGRCIvPgo8cGF0aCBkPSJNMTkuMTAyOCAxNS4xMjg2TDE1LjEyODggMjAuNTA4MkwxMS4xNTAxIDE1LjEyODZMMTUuMTI4OCA5Ljc0NDE0TDE5LjEwMjggMTUuMTI4NloiIGZpbGw9IiM2REZGRkQiLz4KPC9zdmc+Cg==) no-repeat center center / contain;
}



.article__advantages {
  display: flex;
  gap: var(--article-advantages-gap);
  margin-top: var(--article-advantages-margin-top);
}

.article__advantage {
  display: block;
  position: relative;
  flex: var(--article-advantage-flex);
  border-radius: var(--article-advantage-border-radius);
  background: var(--article-advantage-background);
  padding: var(--article-advantage-padding) !important;
  margin: 0 !important;
}
.article__advantage:before { display: none !important; }

.image.article-advantage__image {
  margin: var(--article-advantage-image-margin) var(--article-advantage-image-margin) 0 var(--article-advantage-image-margin);
}

.image.article-advantage__image > img {
  width: 100%;
}

.title.article-advantage__title {
  font-family: var(--article-advantage-title-font-family);
  font-size: var(--article-advantage-title-font-size);
  font-weight: var(--article-advantage-title-font-weight);
  line-height: var(--article-advantage-title-line-height);
  margin-top: var(--article-advantage-title-margin-top);
}

.article-advantage__description {
  margin-top: var(--article-advantage-description-margin-top) !important;
}



.article .article__aspects {
  display: block;
  position: relative;
  border-radius: var(--article-aspects-border-radius);
  overflow: hidden;
  margin-top: var(--article-aspects-margin-top);
}

.article .article__aspect {
  display: flex;
  background: var(--article-aspect-background);
  padding: 0 !important;
  margin: 0 !important;
}
.article__aspect:before { display: none !important; }

.article__aspect + .article__aspect {
  border-top: var(--article-aspect-border);
}

.article-aspect__element {
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 1 1 25%;
}
.article-aspect__element + .article-aspect__element {
  border-left: var(--article-aspect-border);
}

.article-aspect-element__option {
  display: block;
  position: relative;
  background: var(--article-aspect-option-background);
  font-weight: var(--article-aspect-option-font-weight);
  text-transform: uppercase;
  color: var(--article-aspect-option-color);
  padding: var(--article-aspect-option-padding);
}

.article-aspect-element__value {
  display: block;
  position: relative;
  padding: var(--article-aspect-value-padding);
  margin: auto 0;
}

/* var */
.article__aspect:not(:first-child) .article-aspect-element__option {
  display: none;
}
/*  */






@media screen and (min-width: 1900px) {
  :root {
    --article-splitter-gap: 2.92vw;
    --article-splitter-margin-top: 2.5vw;

    --article-features-gap: 1.67vw;
    --article-features-margin-top: 2.5vw;

    --article-feature-padding: 0.83vw 1.25vw 1.25vw 1.25vw;

    --article-feature-title-gap: 0.83vw;
    --article-feature-title-font-size: 2.08vw;
    --article-feature-title-line-height: 2.5vw;

    --article-feature-title-before-width: 1.56vw;
    --article-feature-title-before-height: 1.56vw;

    --article-advantages-gap: 1.67vw;
    --article-advantages-margin-top: 2.5vw;

    --article-advantage-padding: 1.25vw;

    --article-advantage-title-font-size: 0.94vw;
    --article-advantage-title-line-height: 1.25vw;
    --article-advantage-title-margin-top: 1.25vw;

    --article-advantage-description-margin-top: 0.42vw;

    --article-aspects-gap: 0.83vw;
    --article-aspects-margin-top: 2.5vw;

    --article-aspect-border: 0.05vw solid var(--main-color-opacity-15);

    --article-aspect-element-gap: 0.42vw;
    --article-aspect-element-padding: 0.52vw 0.73vw;

    --article-aspect-option-padding: 0.52vw 0.73vw;

    --article-aspect-value-padding: 0.52vw 0.73vw;
  }
}



@media screen and (max-width: 900px) {
  :root {
    --article-splitter-gap: 32px;
    --article-splitter-image-flex: 1 1 100%;
    --article-splitter-desc-flex: 1 1 100%;

    --article-features-gap: 16px;

    --article-advantages-margin-top: 32px;

    --article-aspect-option-color: var(--accent-color);
  }

  .article__splitter:nth-child(n) {
    flex-direction: column-reverse;
  }
  
  .desc.article-splitter__desc h3 {
    text-align: center;
  }



  .article__features {
    flex-direction: column;
  }



  .article__advantages {
    flex-direction: column;
  }



  .article .article__aspects {
    display: flex;
    flex-direction: column;
    gap: var(--article-aspects-gap);
    margin-top: var(--article-aspects-margin-top);
  }

  .article .article__aspect {
    flex-direction: column;
    border-radius: var(--article-aspect-border-radius);
    overflow: hidden;
  }

  .article-aspect__element {
    gap: var(--article-aspect-element-gap);
    padding: var(--article-aspect-element-padding);
  }
  .article-aspect__element + .article-aspect__element {
    border: none;
  }
  .article-aspect__element:not(:first-child) + .article-aspect__element {
    border-top: var(--article-aspect-border);
  }
  .article-aspect__element:first-child {
    background: var(--article-aspect-element-background);
    color: var(--article-aspect-element-color);
  }

  .article-aspect-element__option {
    display: block !important;
    background: none;
    color: var(--article-aspect-option-color);
    padding: 0;
  }
  .article-aspect__element:first-child .article-aspect-element__option {
    color: var(--article-aspect-element-color);
  }

  .article-aspect-element__value {
    padding: 0;
    margin: 0;
  }
}