@charset "UTF-8";

@import url("reset.css");
@import url("fonts.css");
@import url("swiper-bundle.min.css");

:root {
  --app-height: 100vh;
  --headroom-height: auto;

  --c0: #f1f0f0;
  --c1: #323232;
  --c2: #ffffff;
  --c3: #051840;
  --c4: rgba(50, 50, 50, 0.1);
  --c5: rgba(50, 50, 50, 0.2);
  --c6: #eaeaeb;
  --c7: rgba(50, 50, 50, 0.8);
  --c8: #000000;
  --c9: rgba(255, 255, 255, 0.8);

  --cx: var(--c3);
  --cz: var(--c7);

  --wr: 20rem;
  --awr: calc(-1 * var(--wr));
  --iwr: 30rem;

  --gap: 20rem;
  --sl: max(1px, 1rem);

  --br1: 2rem;
  --br2: 4rem;

  --btn: max(45px, 50rem);

  --altfont: "Canela", serif;

  --f-s: max(14px, 14rem);
  --f-d: max(16px, 18rem);
  --f-m: max(16px, 20rem);
  --f-b: max(16px, 24rem);
  --f-l: max(16px, 32rem);
  --f-l2: max(16px, 42rem);
  --f-xl: max(16px, 58rem);
  --f-xxl: max(16px, 90rem);

  --mw: 1600px;
  --mw1: 1200rem;

  --rating: 5;

  --swiper-scrollbar-drag-bg-color: var(--cx);
  --swiper-pagination-progressbar-size: max(2px, 2rem);
  --swiper-theme-color: var(--cx);
}

/* globals */

@media screen {
  html {
    font-size: 0.0625vw;
    background-color: var(--c0);
    scrollbar-gutter: stable;
  }

  .document {
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    font-size: var(--f-d);
    line-height: 1.5;
    color: var(--c1);
    background-color: var(--c0);
    letter-spacing: -0.01em;
  }

  .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--wr);
    max-width: var(--mw);
  }

  .preloader {
    background-color: var(--c0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.25s 1s;
    display: flex;
    color: var(--c1);
    will-change: transform;
  }

  .loading {
    pointer-events: none;
  }
  .loading .preloader {
    transition-duration: 0s;
    opacity: 1;
    visibility: visible;
  }

  .icon {
    display: flex;
    max-height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 0;
    max-width: 100%;
    width: auto;
    height: auto;
  }
  .cover,
  .contain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: center;
    pointer-events: none;
  }
  .cover {
    object-fit: cover;
  }
  .contain {
    object-fit: contain;
  }
  .fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  .button {
    display: inline-flex;
    justify-content: center;
    max-width: 100%;
    user-select: none;
    cursor: pointer;
    align-items: center;
    z-index: 1;
    background-clip: padding-box;
  }
  .button:not(.fill) {
    overflow: hidden;
    position: relative;
  }
  .button-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 0 0.1em;
  }

  .button__default {
    background-color: var(--c3);
    color: var(--c2);
    padding: 0 40rem;
    min-width: 180rem;
    height: var(--btn);
    border: var(--sl) solid var(--c3);
  }
  .button__default .button-text {
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-weight: 500;
  }
  .button__secondary {
    color: var(--cx);
    padding: 0 40rem;
    min-width: 180rem;
    height: var(--btn);
    border: var(--sl) solid;
  }
  .button__secondary .button-text {
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  .button__unl {
    color: var(--cx);
  }
  .button__unl .button-text {
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-weight: 500;
  }

  .button__wide {
    width: 100%;
  }

  .title {
    line-height: 1;
    font-weight: 400;
    width: 100%;
    font-family: var(--altfont);
    letter-spacing: -0.03em;
    color: var(--cx);
  }

  .title__small {
    font-size: var(--f-l);
  }
  .title__medium {
    font-size: var(--f-l2);
  }
  .title__default {
    font-size: var(--f-xl);
  }
  .title__large {
    font-size: var(--f-xxl);
  }

  .container {
    display: flex;
    flex-direction: column;
    min-height: var(--app-height);
  }

  .header-container {
    position: sticky;
    z-index: 10;
    top: calc(-1 * var(--headroom-height));
    transition: top 0.25s;
  }

  .topnav {
    background-color: var(--c2);
    color: var(--c1);
  }
  .topnav-inner {
    padding: 5rem 0;
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
  }
  .topnav-inner ul {
    display: flex;
    flex-wrap: wrap;
    margin: -5rem -20rem;
    align-items: center;
    justify-content: flex-end;
  }
  .topnav-inner li {
    padding: 5rem 20rem;
  }

  .topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 120rem;
    padding: 30rem 0;
  }
  .topbar-logo {
    max-width: 180rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .topbar-nav {
    display: flex;
    align-items: center;
    position: relative;
  }
  .topbar-nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--sl);
    background-color: currentColor;
    opacity: 0.2;
  }
  .topbar-nav ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
  }
  .topbar-nav li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30rem;
  }
  .topbar-nav__left li:first-child {
    padding-left: 0;
  }
  .topbar-nav__right li:last-child {
    padding-right: 0;
  }
  .topbar-nav li::after {
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: calc(-1 * var(--sl));
    height: var(--sl);
    background-color: var(--cx);
    position: absolute;
    transform: scaleX(0);
    transition: transform 0.15s;
  }
  .topbar-nav-icon {
    flex: none;
    margin-left: 5rem;
    width: 0.8em;
    height: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
  }

  .header.contrast {
    color: var(--c0);
  }
  .header.contrast .topbar-logo {
    background-image: url(../img/bristal-logo.svg);
  }
  .header.contrast .topbar-logo img {
    visibility: hidden;
  }

  .curtain {
    background-color: var(--c2);
    color: var(--c3);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    padding-top: var(--headroom-height);
    padding-bottom: 90rem;
    transition: transform 0.25s;
    will-change: transform;
  }
  .curtain:not(.active) {
    transform: translateY(-100%);
  }

  .popup-overlay {
    transition: all 0.25s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    background-color: var(--c8);
    opacity: 0;
    visibility: hidden;
  }

  .popup.active ~ .popup-overlay {
    visibility: visible;
    opacity: 0.4;
  }

  .curtain-active {
    overflow: hidden;
  }
  .curtain-active .header-container {
    top: 0;
  }

  .curtain-active .header.contrast {
    color: var(--c1);
  }
  .curtain-active .header.contrast .topbar-logo {
    background-image: none;
  }
  .curtain-active .header.contrast .topbar-logo img {
    visibility: visible;
  }
  .curtain-active .topbar-nav li.active::after {
    transform: scaleX(1);
  }
  .curtain-active .topbar-nav li.active .topbar-nav-icon {
    transform: scaleY(-1);
  }

  .page-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 90rem;
    margin-top: calc(-1 * var(--headroom-height));
  }
  .page-header-inner {
    padding: var(--headroom-height) var(--iwr) 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }
  .page-header-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--c8);
  }
  .page-header-media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(var(--c8), rgba(0, 0, 0, 0.3), var(--c8));
    opacity: 0.7;
  }
  .page-header-media .swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .page-header-breadcrumbs:not(:last-child) {
    margin-bottom: 100rem;
  }
  .page-header-content {
    margin-bottom: 100rem;
  }
  .page-header-content:last-child {
    margin-top: auto;
    margin-bottom: 0;
  }
  .page-header-subtitle {
    margin-top: 20rem;
    font-size: var(--f-b);
    padding-right: calc((100% + var(--gap)) / 2);
    line-height: 1.3;
  }
  .page-header-subtitle a {
    text-decoration: underline;
  }
  .page-header-action {
    margin-top: 40rem;
    display: inline-grid;
    grid-auto-flow: column;
    grid-gap: 30rem;
    margin-right: auto;
    align-items: center;
  }
  .page-header-action-button {
    min-width: 240rem;
  }
  .page-header-nav {
    margin: auto 0 0;
    flex: none;
    width: 100%;
  }
  .page-header-nav .swiper {
    overflow: visible;
    margin: 0 -45rem;
  }
  .page-header-nav .swiper-slide {
    padding: 0 45rem;
    width: auto;
    transition: opacity 0.25s;
  }
  .page-header-nav .swiper-slide:not(.swiper-slide-active):not(:hover) {
    opacity: 0.6;
  }
  .page-header-nav .swiper-slide:not(.swiper-slide-active) .header-card-footer {
    opacity: 0;
  }
  .page-header-nav .swiper-slide:not(.swiper-slide-active) .header-card a {
    pointer-events: none;
  }

  .page-header-media ~ .page-header-inner {
    color: var(--c2);
    --cx: var(--c2);
    --cz: var(--c9);
    min-height: var(--app-height);
    padding-bottom: 80rem;
  }

  .page-header .button__default {
    background-color: var(--c2);
    color: var(--c1);
    border-color: var(--c2);
  }

  .page-header + .section {
    margin-top: 0;
  }

  .header-card {
    width: 280rem;
    border-top: var(--sl) solid var(--c0);
    padding-top: 15rem;
    cursor: pointer;
  }
  .header-card-title {
    font-size: var(--f-l);
  }
  .header-card-subtitle {
    margin-top: 5rem;
    font-size: var(--f-m);
  }
  .header-card-footer {
    margin-top: 15rem;
    transition: opacity 0.15s;
  }

  .breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.25em;
  }
  .breadcrumbs li {
    margin: 0 0.25em;
  }
  .breadcrumbs li:not(:last-child)::after {
    content: "/";
    padding-left: 0.25em;
  }
  .breadcrumbs li:last-child {
    pointer-events: none;
    opacity: 0.6;
  }

  .main {
    margin-top: 0;
    flex: auto;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
  }

  .section {
    position: relative;
    z-index: 1;
    margin-top: 160rem;
  }
  .section:first-child {
    margin-top: 0;
  }
  .section:last-child {
    margin-bottom: 160rem;
  }
  .section:only-child {
    flex: auto;
  }

  .m0 {
    margin-top: 0 !important;
  }
  .m1 {
    margin-top: 160rem !important;
  }
  .m2 {
    margin-top: 120rem !important;
  }
  .m3 {
    margin-top: 60rem !important;
  }
  .m4 {
    margin-top: 20rem !important;
  }

  .section__contrast {
  }
  .section__contrast:last-child {
    margin-bottom: 0;
  }
  .section__contrast .button__default {
    background-color: var(--c2);
    color: var(--c1);
    border-color: var(--c2);
  }

  .section__contrast .section-inner {
    padding: 120rem var(--iwr);
    background-color: var(--c3);
    color: var(--cz);
    --cx: var(--c2);
    --cz: var(--c9);
  }

  .section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: calc((100% + var(--gap)) / 6 * 4 - var(--gap));
    margin: 0 auto;
  }
  .section-header:not(:last-child) {
    margin-bottom: 60rem;
  }
  .section-header-title {
    color: var(--cx);
  }
  .section-header-title:only-child {
    max-width: none;
  }
  .section-header-subtitle {
    margin-top: 30rem;
    max-width: 980rem;
    color: var(--cz);
  }
  .section-header-subtitle:last-child {
  }
  .section-header-subtitle a {
    text-decoration: underline;
  }
  .section-header-action {
    margin-top: 30rem;
    display: inline-grid;
    grid-gap: 30rem;
    align-items: center;
    grid-template-columns: 1fr 1fr;
  }
  .section-header-action-button {
    min-width: 240rem;
  }
  .section-header-action-button:only-child {
    grid-column: 1/-1;
  }
  .section-header-action-button:not(:only-child) .button {
    width: 100%;
  }
  .section-header-tabs {
    margin-top: 60rem;
    width: 100%;
  }

  .section-header-title + .section-header-action {
    margin-top: 50rem;
  }

  .tabs ul {
    display: flex;
    border-bottom: var(--sl) solid transparent;
    font-size: var(--f-m);
    user-select: none;
    position: relative;
  }
  .tabs ul::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--sl);
    opacity: 0.1;
    background-color: currentColor;
  }
  .tabs li {
    flex: 1;
    position: relative;
    padding: 0 10rem 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    white-space: nowrap;
    transition: color 0.25s;
    text-align: center;
  }
  .tabs li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--sl);
    background-color: var(--cx);
    will-change: transform;
    transition: transform 0.25s;
  }
  .tabs li:not(.current) {
    opacity: 0.5;
  }
  .tabs li:not(.current)::after {
    transform: scaleX(0);
  }
  .tabs li.current {
    color: var(--cx);
    pointer-events: none;
  }

  .footer {
    overflow: hidden;
    margin-top: 0;
    background-color: var(--c3);
    color: var(--cz);
    padding: 60rem 0 50rem;
    --cx: var(--c2);
    --cz: var(--c9);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    grid-gap: 0;
    grid-template-areas:
      ". . f1 . ."
      "f2 f3 f4 f5 f6"
      "f7 f7 f7 f7 f7"
      "f8 f8 f9 f10 f11"
      "f13 f13 f13 f13 f13"
      "f14 . . f15 f15"
      "f16 f17 f18 f19 f20";
  }
  .f1 {
    grid-area: f1;
  }
  .f2 {
    grid-area: f2;
  }
  .f3 {
    grid-area: f3;
  }
  .f4 {
    grid-area: f4;
  }
  .f5 {
    grid-area: f5;
  }
  .f6 {
    grid-area: f6;
  }
  .f7 {
    grid-area: f7;
    border-top: var(--sl) solid;
    margin-top: 90rem;
    padding-top: 70rem;
    margin-bottom: 20rem;
    font-size: var(--f-m);
    color: var(--cx);
  }
  .f8 {
    grid-area: f8;
  }
  .f9 {
    grid-area: f9;
  }
  .f10 {
    grid-area: f10;
  }
  .f11 {
    grid-area: f11;
  }
  .f12 {
  }
  .f13 {
    grid-area: f13;
    margin-top: 80rem;
    margin-bottom: 20rem;
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
  }
  .f13 img {
    height: 100%;
    width: auto;
    max-width: none;
    max-height: none;
  }
  .f13-1 {
    height: 85rem;
    grid-column: 1/2;
  }
  .f13-1 img {
    margin-bottom: -1.5em;
    height: calc(100% + 1.5em);
  }
  .f13-2 {
    height: 85rem;
    grid-column: 4/5;
  }
  .f13-3 {
    height: 85rem;
    grid-column: 5/6;
  }
  .f14 {
    grid-area: f14;
    margin-bottom: 10rem;
    padding-top: 1.5em;
    margin-top: auto;
  }
  .f15 {
    grid-area: f15;
    margin-bottom: 10rem;
  }
  .f16 {
    grid-area: f16;
  }
  .f17 {
    grid-area: f17;
  }
  .f18 {
    grid-area: f18;
  }
  .f19 {
    grid-area: f19;
  }
  .f20 {
    grid-area: f20;
  }
  .f20 a {
    color: var(--cx);
  }
  .f21 {
    border-top: var(--sl) solid;
    margin-top: 70rem;
    padding-top: 70rem;
    padding-right: var(--gap);
  }
  .f21-1 {
    color: var(--cx);
    margin-bottom: 15rem;
  }
  .f21 {
    padding-right: var(--gap);
  }
  .f21-2 ul {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10rem;
  }
  .f22-1 {
    color: var(--cx);
    margin-bottom: 15rem;
    text-transform: uppercase;
  }
  .f22-2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-gap: 0;
  }
  .f22-2 ul {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 0.5em;
    padding-right: var(--gap);
  }
  .f22-2 ul:only-child {
    grid-column: 1/-1;
    padding-right: 0;
  }

  .textbox a {
    text-decoration: underline;
  }
  .textbox b {
    font-weight: 500;
  }
  .textbox i {
    font-style: italic;
  }
  .textbox ul {
    margin: 30rem 0;
  }
  .textbox ul:first-child {
    margin-top: 0;
  }
  .textbox ul:last-child {
    margin-bottom: 0;
  }
  .textbox li {
    position: relative;
    padding-left: 1.5em;
  }
  .textbox li::before {
    content: "\2022";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    text-align: center;
  }
  .textbox h2 {
    font-family: var(--altfont);
    letter-spacing: -0.03em;
    color: var(--cx);
    line-height: 1;
    margin: 80rem 0 30rem;
    font-size: var(--f-xl);
  }
  .textbox h3 {
    color: var(--cx);
    font-size: var(--f-b);
    line-height: 1.3;
    margin: 40rem 0 30rem;
  }
  .textbox h2:first-child,
  .textbox h3:first-child {
    margin-top: 0;
  }

  .panel:not(.active) {
    display: none;
  }

  .formbox {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10rem;
  }
  .formbox-row {
    display: flex;
  }
  .formbox-cell {
    flex: 1;
  }
  .formbox-cell:not(:first-child) {
    margin-left: 10rem;
  }
  .formbox-checkbox {
    margin-top: 30rem;
  }
  .formbox-footer {
    margin-top: 75rem;
  }

  .selector::before,
  .textfield::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: var(--sl) solid;
    opacity: 0.1;
    border-radius: 0;
    pointer-events: none;
  }

  .textfield {
    position: relative;
    overflow: hidden;
    display: flex;
    background-color: var(--c6);
    color: var(--cx);
    align-items: center;
  }
  .textfield-input {
    padding: 20rem 30rem;
    flex: auto;
    resize: none;
    min-width: 0;
    color: var(--cx);
  }
  .textfield-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    margin-right: 30rem;
  }

  .textfield-input.error {
    color: #ff0000;
  }

  .checkbox {
    overflow: hidden;
    position: relative;
    padding: 0.25em 0;
    margin: -0.25em 0;
  }
  .checkbox-control {
    width: 0;
    height: 0;
    position: absolute;
    right: 100%;
    opacity: 0;
  }
  .checkbox-label {
    display: flex;
    align-items: flex-start;
  }
  .checkbox-label-icon {
    width: 1.2em;
    height: 1.2em;
    border-radius: var(--br1);
    display: flex;
    flex: none;
    margin-right: 10rem;
    padding: 3rem;
    border: var(--sl) solid;
    cursor: pointer;
    position: relative;
    user-select: none;
  }
  .checkbox-label-icon .icon {
    color: var(--cx);
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.25em 0.25em;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .checkbox-label-text {
    user-select: none;
    margin: auto 0;
    color: var(--cz);
    max-width: 440rem;
  }
  .checkbox-label-text a {
    text-decoration: underline;
  }

  .checkbox-control:not(:checked) ~ .checkbox-label-icon {
    opacity: 0.5;
  }
  .checkbox-control:not(:checked) ~ .checkbox-label-icon .icon {
    transform: scale(0);
  }

  .selector {
    position: relative;
    background-color: var(--c6);
    color: var(--cx);
  }
  .selector-holder {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 20rem 30rem;
    user-select: none;
  }
  .selector-holder-input {
    flex: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }
  .selector-holder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: none;
    margin-left: 20rem;
  }
  .selector-list {
    position: absolute;
    z-index: 99;
    background-color: var(--c0);
    box-shadow: inset 0 0 0 var(--sl) var(--c4);
    width: 100%;
    margin-top: calc(-1 * var(--sl));
  }
  .selector-option {
    position: relative;
    padding: 0 30rem;
    cursor: pointer;
    z-index: 1;
  }
  .selector-option.active {
    color: var(--c0);
    background-color: var(--c3);
  }
  .selector-option-inner {
    padding: 15rem 0;
  }
  .selector-option:not(:first-child) .selector-option-inner::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: currentColor;
    opacity: 0.1;
    height: var(--sl);
    z-index: -1;
    margin: 0 30rem;
  }

  .selector.active {
    background-color: var(--c0);
    color: var(--c3);
  }
  .selector.active .selector-holder-icon {
    transform: scaleY(-1);
  }

  .selector-list:not(.active) {
    display: none;
  }

  .carousel-buttons {
    display: inline-grid;
    grid-auto-flow: column;
    grid-gap: 10rem;
    margin: 0 auto;
  }
  .carousel-button {
    cursor: pointer;
    border-radius: 50%;
    width: max(36px, 48rem);
    height: max(36px, 48rem);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--sl) solid var(--c5);
    color: var(--cx);
    position: relative;
  }
  .carousel-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--c0);
    opacity: 0.7;
    z-index: -1;
  }

  .carousel-pagination {
    top: 0;
    left: auto;
    bottom: auto !important;
    line-height: 0;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .carousel-pagination:not(:first-child) {
    margin-top: 80rem;
  }

  .swiper-pagination-bullet {
    width: max(8px, 8rem);
    height: max(8px, 8rem);
    border-radius: 999rem;
    margin: 0 3rem !important;
    transition: all 0.3s linear;
    background-color: var(--c4);
    opacity: 1;
    position: relative;
  }
  .swiper-pagination-bullet::before {
    content: "";
    border-radius: inherit;
    min-width: max(8px, 8rem);
    height: 100%;
    position: absolute;
    opacity: 0;
    width: 0%;
    background-color: var(--cx);
  }

  .carousel-pagination:not(.carousel-autoplay-init)
    .swiper-pagination-bullet-active {
    background-color: var(--cx);
    opacity: 1;
  }

  .carousel-autoplay-init .swiper-pagination-bullet-active {
    width: 80rem;
  }
  .carousel-autoplay-init .swiper-pagination-bullet-active::before {
    opacity: 1;
    width: 100%;
    transition: width 5s linear;
  }

  .carousel-scrollbar {
    width: 100%;
    height: max(2px, 2rem);
    background-color: var(--c4);
    border-radius: 999rem;
    position: relative;
    max-width: 640rem;
    overflow: hidden;
  }

  .swiper-pagination-progressbar-fill {
    border-radius: 999rem;
  }

  .player {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
  }
  .player-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .player-button {
    width: max(55px, 60rem);
    height: max(35px, 40rem);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10rem;
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--c2);
    padding: 10rem;
    backdrop-filter: blur(10px);
  }

  .scheme {
    background-color: var(--c2);
    width: 100%;
    padding: 30rem;
    display: grid;
    grid-template-columns: 150rem 1fr 150rem;
    grid-gap: 50rem;
    grid-template-rows: 1fr auto;
  }
  .scheme-logo {
    max-width: 125rem;
  }
  .scheme-image {
    position: relative;
    grid-row-end: span 2;
  }
  .scheme-title {
    grid-column-start: 1;
    font-size: var(--f-l);
  }
  .scheme-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(25px, 30rem);
    height: max(25px, 30rem);
    color: var(--cx);
    cursor: pointer;
    user-select: none;
    margin-left: auto;
  }

  .rating {
    position: relative;
    width: calc(var(--f-b) * 5);
    height: var(--f-b);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: left;
    background-image: url(../img/rating-blank.svg);
  }
  .rating-stars {
    background-repeat: repeat-x;
    position: absolute;
    background-size: auto 100%;
    background-position: left;
    top: 0;
    left: 0;
    height: 100%;
    background-image: url(../img/rating-colored.svg);
    width: calc(100% * var(--rating) / 5);
  }

  .header.contrast *::-moz-selection,
  .page-header *::-moz-selection,
  .footer *::-moz-selection,
  .section__contrast *::-moz-selection,
  .s8-4 *::-moz-selection,
  .s16-3 *::-moz-selection,
  .s33-3 *::-moz-selection {
    background-color: var(--c2);
    color: var(--c1);
    -webkit-text-fill-color: var(--c1);
  }

  .header.contrast *::selection,
  .page-header *::selection,
  .footer *::selection,
  .section__contrast *::selection,
  .s8-4 *::selection,
  .s16-3 *::selection,
  .s33-3 *::selection {
    background-color: var(--c2);
    color: var(--c1);
    -webkit-text-fill-color: var(--c1);
  }

  .form-container {
    position: relative;
  }
  .success-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--c0);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    transition: all 0.15s;
  }
  .success-message-subtitle {
    margin-top: 40rem;
  }

  .section__contrast .success-message {
    background-color: var(--c3);
  }

  .form-container:not(.success) .success-message {
    visibility: hidden;
    opacity: 0;
  }
}

/* cards */

@media screen {
  .card {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    user-select: none;
  }

  .card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    will-change: transform;
  }

  .card-1 .card-header {
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .card-1 .card-header::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 60%;
  }
  .card-1 .card-content {
    margin-top: 15rem;
  }
  .card-1 .card-title {
    font-size: var(--f-l);
    color: var(--cx);
  }
  .card-1 .card-action {
    margin-top: 10rem;
  }

  .card-2 {
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: auto;
  }
  .card-2 .card-header {
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .card-2 .card-header::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 50%;
  }
  .card-2 .card-content {
    display: flex;
    flex-direction: column;
    padding-right: 40rem;
  }
  .card-2 .card-title {
    font-size: var(--f-b);
    color: var(--cx);
    line-height: 1.3;
  }
  .card-2 .card-subtitle {
    margin-top: 20rem;
    color: var(--cz);
  }
  .card-2 .card-action {
    margin-top: auto;
    padding-top: 30rem;
  }

  .card-3 .card-header {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: var(--br2);
  }
  .card-3 .card-header::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }

  .card-4 {
    align-items: center;
  }
  .card-4 .card-header {
    max-width: 180rem;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    width: 100%;
    margin-bottom: 20rem;
    background-color: var(--c8);
  }
  .card-4 .card-header::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }
  .card-4 .card-header-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 50%;
    border: var(--sl) solid var(--c2);
    padding: 60rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15rem;
    color: var(--c9);
    cursor: pointer;
  }
  .card-4 .card-media:not(:only-child) {
    opacity: 0.8;
  }
  .card-4 .card-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .card-4 .card-content-icon {
    flex: none;
    width: max(30px, 35rem);
    height: max(30px, 35rem);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cx);
    margin-bottom: 30rem;
  }
  .card-4 .card-text {
    font-size: var(--f-b);
    line-height: 1.3;
  }
  .card-4 .card-footer {
    margin-top: 30rem;
    font-size: var(--f-m);
    color: var(--cx);
  }

  .card-5 {
    padding: 40rem;
    border: var(--sl) solid var(--c4);
    background-color: var(--c0);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 50rem;
    grid-template-rows: 1fr auto;
    align-items: flex-end;
    min-height: 400rem;
  }
  .card-5 .card-header {
    margin-bottom: auto;
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 10rem 50rem;
    align-items: flex-start;
  }
  .card-5 .card-title {
    font-size: var(--f-l);
  }
  .card-5 .card-date {
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }
  .card-5 .card-text {
    max-width: 620rem;
  }
  .card-5 .card-footer-icon {
    position: relative;
    width: 50rem;
    height: 50rem;
    display: block;
  }

  .card-6 {
    justify-content: flex-end;
    color: var(--c9);
    --cx: var(--c2);
    padding: 15rem;
    background-image: linear-gradient(transparent, var(--c8));
    background-size: 100% 50%;
    background-position: bottom;
    background-repeat: no-repeat;
  }
  .card-6 .card-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 20rem;
    align-items: center;
    color: var(--cx);
  }
  .card-6 .card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(20px, 24rem);
    height: max(20px, 24rem);
    transition: all 0.25s;
    will-change: transform;
  }
  .card-6 .card-title {
    font-size: var(--f-b);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .card-6 .card-content {
    padding-top: 15rem;
    transition: all 0.25s;
  }
  .card-6 .card-text {
    max-width: 270rem;
  }
  .card-6 .card-footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}

/* sections */

@media screen {
  .s1-1 {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 90rem;
  }
  .s1-1:not(:first-child) {
    margin-top: 60rem;
  }
  .s1-3 {
    margin-bottom: 20rem;
    border-bottom: var(--sl) solid var(--c4);
    padding-bottom: 10rem;
    font-size: var(--f-m);
    color: var(--cx);
  }
  .s1-4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 60rem var(--gap);
  }
  .s1-5 {
    display: flex;
    justify-content: center;
    margin-top: 80rem;
  }
  .s1-6 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: var(--gap);
    align-items: flex-end;
  }
  .s1-6-3 {
    grid-column: 3/4;
  }

  .s2-1 {
    display: flex;
  }
  .s2-2 {
    margin: 0 auto;
    width: 100%;
    max-width: var(--mw1);
    display: grid;
    grid-template-columns: auto;
  }
  .s2-2::after {
    content: "";
    width: 100%;
    height: var(--sl);
    background-color: currentColor;
    opacity: 0.1;
    display: block;
  }
  .s2-3::before {
    content: "";
    width: 100%;
    height: var(--sl);
    background-color: currentColor;
    opacity: 0.1;
    display: block;
    margin-bottom: 25rem;
  }
  .s2-4 {
    grid-column: 1/3;
    font-size: var(--f-b);
    color: var(--cx);
    line-height: 1.3;
    padding-right: 100rem;
    cursor: pointer;
  }
  .s2-4-1 {
  }
  .s2-4-2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.3em;
    will-change: transform;
    transition: transform 0.25s;
  }
  .s2-5 {
    grid-column: 3/4;
    grid-row: 1/3;
    padding-right: 80rem;
    margin-left: -80rem;
  }
  .s2-5-1 {
    position: relative;
    overflow: hidden;
    display: flex;
  }
  .s2-5-1::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 60%;
    transition: all 0.25s;
  }
  .s2-5-1 img {
    object-position: top;
  }
  .s2-6 {
    grid-column: 1/3;
    padding-right: 100rem;
    color: var(--cz);
    transition: all 0.25s;
    overflow: hidden;
    max-height: 100%;
    margin-top: 25rem;
  }
  .s2-7 {
    padding: 0 20rem 25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 var(--gap);
    grid-template-rows: auto 1fr;
    position: relative;
    align-items: flex-start;
  }

  .s2-3.active .s2-4-2 {
    transform: rotate(135deg);
  }
  .s2-3:not(.active) .s2-5-1::before {
    padding-top: 0;
  }
  .s2-3:not(.active) .s2-6 {
    max-height: 0%;
    opacity: 0;
    margin-top: 0;
    height: 0;
  }

  .s3 {
    background-color: var(--c8);
  }
  .s3 .section-inner {
    padding: 120rem 0;
    background-color: transparent;
  }
  .s3 .section-header:not(:last-child) {
    margin-bottom: 0;
  }
  .s3 .section-header-subtitle {
    max-width: 450rem;
  }
  .s3-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.4;
  }

  .s4-1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-gap: 30rem var(--gap);
    grid-template-areas: "a3 a2" "a3 a4";
  }
  .s4-2 {
    grid-area: a2;
  }
  .s4-3 {
    grid-area: a3;
    position: relative;
    overflow: hidden;
    display: flex;
  }
  .s4-3::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 65%;
  }
  .s4-4 {
    grid-area: a4;
    color: var(--cz);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .s4-4-1 {
    flex: auto;
  }
  .s4-4-2 {
    flex: none;
    margin-top: 40rem;
    min-width: 240rem;
  }
  .s4-2,
  .s4-4 {
    padding-left: 30rem;
    padding-right: 50rem;
  }

  .s4-5__a .s4-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "a2 a3 a3" "a4 a3 a3";
  }
  .s4-5__a .s4-2,
  .s4-5__a .s4-4 {
    padding-left: 0;
    padding-right: 0;
    margin-right: calc(-1 * var(--gap));
  }
  .s4-5__a .s4-3 {
    margin-left: 70rem;
    margin-right: 0;
  }

  .s4-5__b .s4-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "a3 a2 a2" "a3 a4 a4";
  }
  .s4-5__b .s4-2,
  .s4-5__b .s4-4 {
    padding-left: 0;
    margin-left: 70rem;
    padding-right: 150rem;
  }
  .s4-5__b .s4-3 {
    margin-left: 0;
    margin-right: calc(-1 * var(--gap));
  }

  .s4-5__c .s4-2 {
    padding-left: 170rem;
    padding-right: 0;
  }
  .s4-5__c .s4-4 {
    padding-left: 170rem;
  }
  .s4-5__c .s4-3 {
    margin-right: calc(-100rem - var(--gap));
  }

  .s4-6 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 0 var(--gap);
    grid-template-rows: 100rem 1fr auto;
    grid-template-areas: "a7 . ." "a7 a8 a9" "a7 a10 a9";
  }
  .s4-6:not(:first-child) {
    margin-top: 60rem;
  }
  .s4-7 {
    grid-area: a7;
    display: flex;
    min-height: 100%;
    position: relative;
  }
  .s4-7::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }
  .s4-8 {
    grid-area: a8;
    color: var(--cz);
    padding-left: 70rem;
    padding-right: 80rem;
  }
  .s4-8-1 {
    font-size: var(--f-l);
    color: var(--cx);
  }
  .s4-8-1:not(:last-child) {
    margin-bottom: 40rem;
  }
  .s4-9 {
    grid-area: a9;
    display: flex;
    position: relative;
  }
  .s4-9::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }
  .s4-10 {
    grid-area: a10;
    margin-top: 30rem;
    padding-left: 70rem;
    padding-right: 80rem;
  }
  .s4-6 figcaption {
    position: absolute;
    top: 100%;
    display: block;
    width: 100%;
    color: var(--cz);
    padding-top: 10rem;
    pointer-events: none;
  }

  .s5-1 {
    position: relative;
    display: flex;
    overflow: hidden;
    background-color: var(--c4);
  }
  .s5-1::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 40%;
  }

  .s6:not(.section__contrast) {
    padding: 120rem 0;
  }

  .s7 {
  }
  .s7 .section-inner {
    padding: 0;
  }
  .s7-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0;
    min-height: 200rem;
  }
  .s7-2 {
    flex: auto;
  }
  .s7-2:not(:first-child) {
    margin: 0 80rem;
    flex: 1;
  }
  .s7-2-2 {
    font-size: var(--f-m);
  }
  .s7-2-2:not(:first-child) {
    margin-top: 20rem;
  }
  .s7-2-3:not(:first-child) {
    margin-top: 40rem;
  }
  .s7-3 {
    position: relative;
    overflow: hidden;
    display: flex;
  }
  .s7-4 {
    background-color: var(--c3);
    padding: 50rem 60rem 50rem 90rem;
    display: flex;
  }

  .s8-1 {
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: 1fr 1fr;
  }
  .s8-2 {
    background-color: var(--c8);
    color: var(--c2);
    --cx: var(--c2);
    --cz: var(--c9);
    min-height: 480rem;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .s8-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
  }
  .s8-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100rem;
    flex-direction: column;
    position: relative;
    z-index: 1;
    margin: auto;
    width: 100%;
  }
  .s8-4-1 {
    text-align: center;
  }
  .s8-4-2 {
    margin-top: 20rem;
    text-align: center;
    color: var(--cz);
  }
  .s8-4-2 .textbox p {
    margin: 1em 0;
  }
  .s8-4-2 .textbox li {
    padding-right: 1.5em;
  }
  .s8-4-2 .textbox li::before {
    position: relative;
    margin-left: -1.5em;
    display: inline-block;
  }
  .s8-4-3 {
    margin-top: 30rem;
  }
  .s8-4-3 .button__default {
    background-color: var(--c2);
    color: var(--c1);
    border-color: var(--c2);
  }

  .s8-2:nth-child(odd):last-child {
    grid-column: 1/-1;
  }
  .s8-2:nth-child(odd):last-child .s8-4 {
    max-width: calc((100% - var(--gap)) / 2);
  }

  .s9 .section-inner {
    background-color: transparent;
    padding: var(--iwr);
    position: relative;
  }
  .s9:last-child {
    margin-bottom: 20rem;
  }
  .s9-1 {
    overflow: hidden;
  }
  .s9-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .s9-3 {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
  }
  .s9-4 {
    background-color: var(--c3);
    padding: 40rem;
    color: var(--c2);
    --cx: var(--c2);
    --cz: var(--c9);
  }
  .s9-5 {
  }
  .s9-6 {
    margin-top: 40rem;
  }
  .s9-7 {
    margin-top: 30rem;
  }
  .s9-7 .selector:not(.active),
  .s9-7 .textfield {
    background-color: transparent;
  }
  .s9-8 {
    margin-top: 30rem;
    color: var(--cz);
  }
  .s9-9 {
    margin-top: 40rem;
    display: grid;
    width: 100%;
    grid-template-columns: auto;
    grid-gap: 25rem;
  }

  .s10-1 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0 100rem;
    grid-template-rows: auto 1fr;
    grid-template-areas: "a2 a4" "a3 a3";
    align-items: flex-end;
  }
  .s10-2 {
    grid-area: a2;
  }
  .s10-2-2 {
    margin-top: 20rem;
    max-width: 1200rem;
    color: var(--cz);
  }
  .s10-3 {
    grid-area: a3;
    border-top: var(--sl) solid var(--c5);
    border-bottom: var(--sl) solid var(--c5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 var(--gap);
  }
  .s10-3:not(:first-child) {
    margin-top: var(--gap);
  }
  .s10-3-1 {
    padding: var(--gap) 0;
  }
  .s10-3-1:nth-child(n + 4) {
    display: none;
  }
  .s10-4 {
    grid-area: a4;
    padding: 10rem 0;
  }
  .s10-5 {
    display: flex;
    justify-content: center;
    margin-top: 50rem;
  }

  .s11-3 {
    display: flex;
    margin-top: 20rem;
  }
  .s11-4 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: var(--gap);
    max-width: 1290rem;
    margin: 0 auto;
    width: 100%;
  }
  .s11-5 {
    margin-right: calc(-1 * var(--gap));
  }
  .s11-5-1 {
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .s11-5-1:not(:last-child) {
    margin-bottom: 20rem;
  }
  .s11-5-1::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 120%;
  }
  .s11-5-2 {
    font-size: var(--f-l);
    color: var(--cx);
  }
  .s11-5-3 {
    margin-top: 10rem;
    color: var(--cx);
  }
  .s11-6 {
    grid-column: 2/4;
    padding-left: 50rem;
    color: var(--cz);
  }

  .s12-1 {
    display: flex;
  }
  .s12-2 {
    width: 100%;
    max-width: 650rem;
    margin: 0 auto;
  }
  .s12-3 {
    margin-bottom: 40rem;
  }

  .s13 .section-inner {
    background-color: transparent;
    padding: var(--iwr);
    position: relative;
  }
  .s13:last-child {
    margin-bottom: 20rem;
  }
  .s13-1 {
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  .s13-1::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 50%;
  }
  .s13-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .s13-3 {
    position: relative;
    z-index: 1;
    background-color: var(--c3);
    padding: 40rem;
    max-width: 540rem;
  }
  .s13-5 {
    max-width: 355rem;
    margin-top: 1em;
    color: var(--cz);
  }
  .s13-6 {
    margin-top: 30rem;
  }

  .s14-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
    align-items: center;
  }
  .s14-2 {
    position: relative;
    overflow: hidden;
    display: flex;
    max-width: 400rem;
    margin-left: auto;
    width: 100%;
    margin-right: 150rem;
  }
  .s14-2::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 120%;
  }
  .s14-3 {
    padding: 50rem 50rem 50rem 0;
    margin-left: calc(-100rem - var(--gap));
  }
  .s14-4 {
    margin-bottom: 40rem;
  }
  .s14-5 {
    color: var(--cz);
  }

  .s15-1 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0 50rem;
    grid-template-rows: auto;
    grid-template-areas: "a2 a4" "a3 a5" "a6 a6";
    align-items: flex-end;
  }
  .s15-2 {
    grid-area: a2;
    padding-bottom: 20rem;
  }
  .s15-3 {
    grid-area: a3;
    color: var(--cz);
    max-width: 615rem;
  }
  .s15-4 {
    grid-area: a4;
    margin-left: auto;
  }
  .s15-5 {
    grid-area: a5;
    margin-left: auto;
  }
  .s15-6 {
    grid-area: a6;
    border-top: var(--sl) solid var(--c5);
    margin-top: 20rem;
    padding-top: 20rem;
  }
  .s15-6 .swiper {
    margin-left: calc(-1 * var(--gap));
    overflow: visible;
  }
  .s15-6 .swiper-slide {
    padding-left: var(--gap);
  }
  .s15-7 {
    display: flex;
    justify-content: center;
    margin-top: 50rem;
  }

  .s16-1 {
    grid-column: 2/12;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
    align-items: center;
  }
  .s16-2 {
    padding: 40rem 50rem 40rem 0;
  }
  .s16-3 {
    background-color: var(--c3);
    color: var(--c2);
    --cx: var(--c2);
    --cz: var(--c9);
    padding: 70rem 100rem;
    min-height: 100%;
    display: flex;
    align-items: center;
  }
  .s16-5 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--gap);
  }
  .s16-6 {
    margin-top: 40rem;
    color: var(--cz);
  }
  .s16-7 {
    color: var(--cz);
    margin: auto;
    width: 100%;
  }

  .s17-1 {
    display: flex;
  }
  .s17-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    padding: 20rem 30rem;
  }
  .s17-2-1 {
    position: relative;
    display: flex;
    width: max(48px, 64rem);
    color: var(--cx);
  }
  .s17-2-1::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }
  .s17-2-1 svg,
  .s17-2-1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .s17-2-1 svg * {
    fill: currentColor;
  }
  .s17-2-2 {
    color: var(--cx);
    font-size: var(--f-l);
    margin-top: 30rem;
  }
  .s17-2-3 {
    margin-top: 20rem;
    color: var(--cz);
  }
  .s17-3 {
    display: flex;
    justify-content: center;
    margin-top: 50rem;
  }

  .s17-1__a .s17-2 {
    padding: 20rem;
  }
  .s17-1__a .s17-2-1 {
    width: max(48px, 56rem);
  }

  .s17.section__contrast:last-child {
    margin-bottom: 20rem;
  }

  .section__contrast + .s17.section__contrast {
    margin-top: 0;
  }
  .section__contrast + .s17.section__contrast .section-inner {
    padding-top: 0;
  }

  .s18-1 {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 160rem;
  }
  .s18-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30rem var(--gap);
    grid-template-rows: auto 1fr;
  }
  .s18-3 {
    grid-area: a3;
  }
  .s18-4 {
    grid-area: a4;
    display: flex;
    flex-direction: column;
    color: var(--cz);
  }
  .s18-4-2 {
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .s18-4-2::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 65%;
  }
  .s18-5 {
    grid-area: a5;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .s18-5::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 45%;
  }

  .s19-1 {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 80rem;
  }
  .s19-1:not(:first-child) {
    margin-top: 80rem;
  }
  .s19-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 600rem;
    margin: 0 auto;
  }
  .s19-2::before {
    content: "";
    width: 50%;
    height: var(--sl);
    background-color: currentColor;
    flex: none;
    margin-bottom: 80rem;
    opacity: 0.1;
  }
  .s19-3 {
    font-size: var(--f-l);
  }
  .s19-4 {
    margin-top: 30rem;
    color: var(--cz);
  }

  .s19.section__contrast:last-child {
    margin-bottom: 20rem;
  }

  .s20-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80rem var(--gap);
  }
  .s20-3 ul {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 20rem;
  }
  .s20-3 li {
    padding-left: 1.5em;
    position: relative;
  }
  .s20-3 li::before {
    content: "";
    position: absolute;
    background-color: currentColor;
    left: 0;
    width: 0.5em;
    height: 0.5em;
    top: 0.5em;
    border-radius: 50%;
  }
  .s20-4 {
    position: relative;
    overflow: hidden;
    display: flex;
    min-height: 100%;
  }
  .s20-4::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }
  .s20-5 {
    display: flex;
    flex-direction: column;
  }
  .s20-5-1 {
    margin-bottom: 30rem;
    font-size: var(--f-l);
    color: var(--cx);
  }
  .s20-5-2 {
    flex: auto;
  }
  .s20-5-2:not(:last-child) {
    margin-bottom: 30rem;
  }
  .s20-5-3 {
  }
  .s20-2,
  .s20-5 {
    padding-right: 100rem;
  }
  .s20-3,
  .s20-4 {
    margin-right: 60rem;
  }

  .s20.section__contrast .section-inner {
    padding: 120rem 0;
  }
  .s20.section__contrast .s20-2,
  .s20.section__contrast .s20-5 {
    padding-left: 100rem;
  }

  .s20.section__contrast:last-child {
    margin-bottom: 20rem;
  }

  .s21-1 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 0 var(--gap);
    grid-template-rows: auto;
    grid-template-areas:
      "a2 a2 a2 a2 a2 a2 a5 a5 a5 a5 a5 a5"
      "a3 a3 a3 a3 a3 a3 a5 a5 a5 a5 a5 a5"
      "a4 a4 a4 a4 a4 a4 a5 a5 a5 a5 a5 a5"
      "a6 a6 a6 a7 a7 a7 a5 a5 a5 a5 a5 a5"
      ". . . a7 a7 a7 a8 a8 a8 . . .";
  }
  .s21-2 {
    grid-area: a2;
  }
  .s21-3 {
    grid-area: a3;
    margin-top: 30rem;
    padding-right: 30rem;
  }
  .s21-4 {
    grid-area: a4;
    margin-top: 30rem;
    padding-right: 30rem;
  }
  .s21-4:not(:last-child) {
    margin-bottom: 60rem;
  }
  .s21-5 {
    grid-area: a5;
  }
  .s21-5:not(:last-child) {
    margin-bottom: var(--gap);
  }
  .s21-6 {
    grid-area: a6;
  }
  .s21-7 {
    grid-area: a7;
  }
  .s21-8 {
    grid-area: a8;
  }
  .s21-5,
  .s21-6,
  .s21-7,
  .s21-8 {
    position: relative;
    overflow: hidden;
    display: flex;
  }
  .s21-5::before,
  .s21-6::before,
  .s21-7::before,
  .s21-8::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 75%;
  }

  .s21-1 figcaption {
    display: block;
    width: 100%;
    color: var(--cz);
    padding-top: 10rem;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--c0);
  }

  .s22 {
    min-height: var(--app-height);
    background-color: var(--c8);
  }
  .s22 .section-inner {
    background-color: transparent;
    padding: 100rem 60rem;
    --cz: var(--c2);
  }
  .s22 .section-header {
    text-align: left;
    align-items: flex-start;
    margin: 0;
  }
  .s22 .section-header:not(:last-child) {
    margin-bottom: 0;
  }
  .s22 .section-header-subtitle {
    max-width: 600rem;
  }
  .s22 .section-header-action {
    margin-top: 60rem;
  }
  .s22-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.4;
  }

  .s23-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    grid-column: 2/6;
  }
  .s23-2 {
    text-align: center;
  }
  .s23-3 {
    margin-top: 40rem;
    min-width: 580rem;
  }
  .s23-4 {
    margin-top: 70rem;
    width: 100%;
  }
  .s23-5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--gap);
  }
  .s23-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40rem;
    align-items: center;
  }
  .s23-7 {
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .s23-7::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }
  .s23-8 {
    grid-column-end: span 2;
  }
  .s23-8-1 {
    font-size: var(--f-l);
    margin-bottom: 10rem;
  }
  .s23-8-2 {
    color: var(--cz);
  }

  .s24-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
    border-top: var(--sl) solid var(--c5);
    border-bottom: var(--sl) solid var(--c5);
  }
  .s24-2 {
    margin-right: calc(-1 * var(--gap));
  }
  .s24-3 {
    border-left: var(--sl) solid var(--c5);
  }
  .s24-4 {
    padding: 40rem 50rem;
  }
  .s24-4:not(:first-child) {
    border-top: var(--sl) solid var(--c5);
  }
  .s24-5 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 50rem;
    align-items: center;
    cursor: pointer;
    color: var(--cx);
  }
  .s24-5-1 {
    font-size: var(--f-l);
    transition: opacity 0.25s;
  }
  .s24-5-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(20px, 24rem);
    height: max(20px, 24rem);
    transition: all 0.25s;
    will-change: transform;
  }
  .s24-7 {
    padding: 20rem 70rem 20rem var(--gap);
  }
  .s24-7:not(:first-child) {
    border-top: var(--sl) solid var(--c5);
  }
  .s24-4:not(.active) .s24-5-1 {
    opacity: 0.4;
  }
  .s24-4:not(.active) .s24-5-2 {
    opacity: 0;
    transform: translateX(-50%);
  }

  .s25-1 {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 160rem;
  }
  .s25-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
  }
  .s25-3 {
    display: grid;
  }
  .s25-4 {
    padding-right: 50rem;
  }
  .s25-4:not(:last-child) {
    margin-bottom: 60rem;
  }
  .s25-5,
  .s25-7 {
    display: flex;
  }
  .s25-8 {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
  }
  .s25-8::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 65%;
  }

  .s26-1 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 0 50rem;
    align-items: flex-end;
  }
  .s26-4 {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 0 var(--gap);
  }
  .s26-4:not(:first-child) {
    border-top: var(--sl) solid var(--c5);
    margin-top: 30rem;
    padding-top: 90rem;
  }
  .s26-5 {
    grid-column: 1/-1;
    display: flex;
    justify-content: center;
    margin-top: 50rem;
  }
  .s26-6 {
    grid-column: 2/4;
  }

  .s27-2 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 0 var(--gap);
  }
  .s27-3 {
    grid-column: 2/12;
    position: relative;
  }
  .s27-4 {
    width: 100%;
  }
  .s27-4 .swiper {
    margin: 0 calc(var(--gap) / -2);
    overflow: visible;
  }
  .s27-4 .swiper-slide {
    padding: 0 calc(var(--gap) / 2);
  }
  .s27-5 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
    right: 0;
    margin: 0 calc(-1 * (100% + var(--gap)) / 10 + 0rem);
    z-index: 1;
  }
  .s27-5 .carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: all;
  }
  .s27-5 .carousel-button__prev {
    left: 0;
  }
  .s27-5 .carousel-button__next {
    right: 0;
  }
  .s27-6 {
    margin-top: 50rem;
    grid-column: 1/-1;
  }

  .s27-7 {
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
    border: var(--sl) solid var(--c5);
  }
  .s27-7::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 50%;
  }

  .s27-2__a .s27-4 .swiper {
    overflow: hidden;
  }

  .s28-1 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--gap);
  }
  .s28-2 {
    grid-column: 2/6;
  }
  .s28-3 {
    display: flex;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .s28-3:not(:last-child) {
    margin-bottom: 40rem;
  }
  .s28-3::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 50%;
  }
  .s28-4:not(:first-child) {
    padding: 0 90rem;
  }

  .s29-1 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 0 30rem;
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "a3 a3 a2" "a3 a3 a4" "a3 a3 a5";
    width: 100%;
    min-height: 500rem;
    max-width: var(--mw1);
    margin: 0 auto;
  }
  .s29-2 {
    grid-area: a2;
  }
  .s29-3 {
    grid-area: a3;
    position: relative;
    overflow: hidden;
  }
  .s29-3 .swiper {
    height: 100%;
  }
  .s29-4 {
    grid-area: a4;
    margin-top: 50rem;
  }
  .s29-5 {
    grid-area: a5;
    margin-top: 25rem;
  }
  .s29-6-1 {
    font-size: var(--f-l);
  }
  .s29-6-2 {
    margin-top: 20rem;
  }

  .s30-1 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-gap: var(--gap);
  }
  .s30-2 {
    grid-column: 2/5;
  }
  .s30-2 .swiper {
    overflow: visible;
  }
  .s30-2 .swiper-slide {
    padding: 0;
    transform-origin: top right;
  }
  .s30-2 .swiper-slide-active {
    transform-origin: top center;
  }
  .s30-2 .swiper-slide-active ~ .swiper-slide {
    transform-origin: top left;
  }
  .s30-3 {
    grid-column: 1/-1;
    display: flex;
    justify-content: center;
    margin-top: 20rem;
  }
  .s30-4 {
    margin-top: 50rem;
    display: flex;
    justify-content: center;
  }

  .s31-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 var(--gap);
    align-items: flex-start;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "a2 a5 a5"
      "a3 a5 a5"
      "a4 a5 a5"
      "a6 . a7";
  }
  .s31-2 {
    grid-area: a2;
    margin-bottom: 70rem;
  }
  .s31-3 {
    grid-area: a3;
  }
  .s31-4 {
    grid-area: a4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 30rem;
  }
  .s31-4-2 {
    min-width: 240rem;
    margin-top: 60rem;
  }
  .s31-5 {
    grid-area: a5;
    margin-left: 70rem;
    margin-bottom: 40rem;
  }
  .s31-6 {
    grid-area: a6;
    margin-top: 40rem;
  }
  .s31-7 {
    grid-area: a7;
    margin-top: auto;
  }
  .s31-5,
  .s31-6,
  .s31-7 {
    display: flex;
    overflow: hidden;
    position: relative;
  }
  .s31-5::before,
  .s31-6::before,
  .s31-7::before {
    content: "";
    flex: none;
    width: 0;
  }
  .s31-5::before {
    padding-top: 75%;
  }
  .s31-6::before {
    padding-top: 160%;
  }
  .s31-7::before {
    padding-top: 100%;
  }
  .s31-8 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .s31-8 figcaption {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    color: var(--cz);
    padding-top: 10rem;
    pointer-events: none;
    background-color: var(--c0);
  }

  .s32-1 {
    padding: 0 60rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: var(--gap);
  }
  .s32-2 {
    min-height: 480rem;
  }
  .s32-2:nth-child(3):last-child {
    grid-column: 3/-1;
  }

  .s33-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
  }
  .s33-2 {
    overflow: hidden;
    position: relative;
    border: var(--sl) solid var(--c4);
  }
  .s33-3 {
    overflow: hidden;
    position: relative;
    background-color: var(--c3);
    color: var(--cz);
    --cz: var(--c9);
    --cx: var(--c2);
  }
  .s33-4 {
    padding: 30rem 60rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 100rem;
  }
  .s33-5 {
    display: flex;
    flex-direction: column;
  }
  .s33-5-1 {
    text-transform: uppercase;
    font-size: var(--f-l2);
  }
  .s33-5-2 {
    margin-top: 15rem;
    font-size: var(--f-m);
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .s33-5-3 {
    padding-top: 60rem;
    margin-top: auto;
  }
  .s33-6 {
    max-width: 170rem;
  }

  .s34-1 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: var(--gap);
  }
  .s34-2 {
    display: flex;
    position: relative;
    overflow: hidden;
    grid-column: 4/10;
  }
  .s34-2::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 56.25%;
  }

  .s35-1 {
    display: grid;
    grid-template-columns: auto;
    padding: 0 120rem;
    grid-gap: 60rem;
  }
  .s35-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--gap);
  }
  .s35-3 {
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .s35-3::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 56.25%;
  }
  .s35-4 {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 100rem;
    align-items: flex-start;
  }
  .s35-4:not(:first-child) {
    border-top: var(--sl) solid;
    padding-top: 30rem;
  }
  .s35-5 {
    display: grid;
    grid-template-columns: 100rem 1fr;
    grid-gap: 20rem;
    align-items: center;
  }
  .s35-7 {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    border-radius: 50%;
    background-color: var(--c0);
    padding: 10%;
  }
  .s35-7::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 100%;
  }
  .s35-7-1 {
    width: 100%;
    min-height: 100%;
    position: relative;
  }
  .s35-8-2 {
    margin-top: 10rem;
  }

  .s35.section__contrast:last-child {
    margin-bottom: 20rem;
  }

  .s404-2 {
    font-size: 400rem;
    line-height: 0.9;
    text-align: center;
  }
}

@media screen and (max-width: 1023.98px) {
  :root {
  }

  html {
    font-size: 1px;
  }

  .desktop {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .mobile {
    display: none !important;
  }

  .s10-3-1 .card-2 {
    grid-template-columns: 1fr 1fr;
  }
  .s10-3-1:nth-child(1) {
    grid-row: 1/3;
  }
  .s10-3-1:not(:first-child):not(:last-child) {
    border-bottom: var(--sl) solid var(--c5);
  }
  .s10-3-1:not(:first-child) {
    padding-left: var(--gap);
    border-left: var(--sl) solid var(--c5);
    margin-left: calc(var(--gap) / -2);
  }
  .s10-3-1:not(:first-child) .card-2 .card-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .s17-2:not(:first-child) {
    margin-left: var(--gap);
  }
  .s17-2:not(:first-child)::before {
    content: "";
    width: var(--gap);
    height: 100%;
    position: absolute;
    right: 100%;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: var(--sl) 100%;
    background-position: center;
    background-repeat: no-repeat;
    top: 0;
    opacity: 0.1;
  }

  .s18-2:nth-child(odd) {
    grid-template-areas: "a3 a5" "a4 a5";
  }
  .s18-2:nth-child(odd) .s18-3 {
    padding-right: 50rem;
  }
  .s18-2:nth-child(odd) .s18-4 {
    padding-right: 180rem;
  }
  .s18-2:nth-child(even) {
    grid-template-areas: "a5 a3" "a5 a4";
  }
  .s18-2:nth-child(even) .s18-3 {
    padding-right: 50rem;
  }
  .s18-2:nth-child(even) .s18-4 {
    padding-right: 120rem;
  }

  .s18-2:not(:first-child) .s18-3 {
    padding-top: 50rem;
    padding-left: 50rem;
  }
  .s18-2:not(:first-child) .s18-4 {
    padding-bottom: 50rem;
    padding-left: 50rem;
  }

  .s18-4-2 {
    order: -1;
    margin-bottom: 20rem;
  }

  .s24-4 .s24-6 {
    display: none;
  }
  .s24-7 .card-2 .card-content {
    padding: 0;
    max-width: calc(
      (100% + 70rem + var(--gap) + var(--gap)) / 3 * 2 - 2 * var(--gap)
    );
  }

  .s25-2:nth-child(3n + 1) .s25-5 {
    margin-bottom: 20rem;
  }
  .s25-2:nth-child(3n + 1) .s25-5,
  .s25-2:nth-child(3n + 1) .s25-6 {
    max-width: 580rem;
  }
  .s25-2:nth-child(3n + 2) {
    align-items: flex-start;
  }
  .s25-2:nth-child(3n + 2) .s25-3 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 60rem;
  }
  .s25-2:nth-child(3n + 2) .s25-5 {
    grid-row-end: span 2;
  }
  .s25-2:nth-child(3n + 2) .s25-7 {
    order: -1;
  }
  .s25-2:nth-child(3n + 3) {
  }
  .s25-2:nth-child(3n + 3) .s25-3 {
    grid-template-columns: 1fr 1.2fr;
    grid-gap: 0 var(--gap);
    padding-bottom: 150rem;
  }
  .s25-2:nth-child(3n + 3) .s25-5 {
    grid-row-end: span 2;
  }
  .s25-2:nth-child(3n + 3) .s25-4,
  .s25-2:nth-child(3n + 3) .s25-6 {
    padding-right: 30rem;
  }
}

@media screen and (min-width: 1600px) {
  html {
    font-size: 1px;
  }
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .button {
    transition: all 0.25s;
  }

  .section-header-subtitle a,
  .textbox a {
    transition: opacity 0.25s;
  }

  .section-header-subtitle a:hover,
  .textbox a:hover,
  .button__unl:hover {
    opacity: 0.6;
  }

  .button__default:hover {
    background-color: transparent;
    color: var(--cx);
  }
  .button__secondary:hover {
    background-color: var(--cx);
    color: var(--c2);
    border-color: var(--cx);
  }

  .section__contrast .button__secondary:hover,
  .page-header .button__secondary:hover,
  .s8-4-3 .button__secondary:hover {
    color: var(--c1);
  }

  .selector-option {
    transition: all 0.15s;
  }
  .selector-option:hover {
    color: var(--c0);
    background-color: var(--c3);
  }

  .tabs li {
    transition: opacity 0.15s;
  }
  .tabs li:not(.current):hover {
    opacity: 1;
  }

  .card-media {
    transition: transform 0.25s;
    pointer-events: none;
  }

  .card-1:hover .card-media,
  .card-2:hover .card-media {
    transform: scale(1.05);
  }

  .card-6:not(:hover) .card-content {
    opacity: 0;
    height: 0;
    padding-top: 0;
  }
  .card-6:not(:hover) .card-header-icon {
    opacity: 0;
    transform: translateX(-50%);
  }

  .carousel-button {
    transition: all 0.25s;
  }
  .carousel-button:hover {
    background-color: var(--c3);
    color: var(--c2);
  }

  .s8-3 {
    transition: transform 0.25s;
    will-change: transform;
  }
  .s8-2:hover .s8-3 {
    transform: scale(1.05);
  }

  .s24-4:not(.active) .s24-5:hover .s24-5-1 {
    opacity: 1;
  }

  .breadcrumbs a,
  .topnav a,
  .header-card a,
  .f17 a,
  .f18 a,
  .f19 a,
  .f20 a,
  .f21-2 a,
  .f22-2 a {
    background-size: 0 var(--sl);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-image: linear-gradient(currentColor, currentColor);
    display: inline;
    transition:
      background-size 0.5s cubic-bezier(0.2, 1, 0.3, 1),
      color 0.25s;
  }

  .breadcrumbs a:hover,
  .topnav a:hover,
  .header-card a:hover,
  .f17 a:hover,
  .f18 a:hover,
  .f19 a:hover,
  .f20 a:hover,
  .f21-2 a:hover,
  .f22-2 a:hover {
    background-size: 100% var(--sl);
    background-position: left bottom;
  }
}