/* add-cart */
.add-cart {
    --size-add-cart: 2.75rem;
    --size-icon-cart: var(--size-icon);
    --size-font-cart: 1rem;

    display: grid;
    align-items: center;
    gap: var(--offset-main);
    position: relative;
    z-index: 1;
}
.add-cart__add {
    --size-btn: var(--size-add-cart);
    
    min-width: fit-content;
}
.add-cart__wrapper {
    width: 100%;
    height: var(--size-add-cart);
    display: grid;
    grid-template-columns: var(--size-add-cart) 3rem var(--size-add-cart);
    border-radius: 0.375rem;
    border: 0.0625rem solid var(--color-border);
    overflow: hidden;
    width: fit-content;
}
.add-cart__button,
.add-cart__wrapper input {
    overflow: hidden;
}
.add-cart__wrapper input {
    height: 100%;
    color: currentColor;
    text-align: center;
    font-size: var(--size-font-cart);
    line-height: 1.5;
    font-weight: var(--font-regular);
    transition: var(--transition);
}
.add-cart__button {
    cursor: pointer;
    color: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-grey-quaternary);
}
.add-cart__minus {
    padding-left: 0.25rem;
}
.add-cart__plus {
    padding-right: 0.25rem;
}
.add-cart__button svg {
    width: var(--size-icon-cart);
    height: var(--size-icon-cart);
}

/**/
.add-cart_static {
    grid-template-columns: min-content 8.75rem;
}
.add-cart:not(._added):not(.add-cart_static):not(._fixed) .add-cart__wrapper {
    display: none;
}
.add-cart:not(._added) .add-cart__link {
    display: none;
}
.add-cart._added .add-cart__add {
    display: none;
}
.add-cart._max .add-cart__plus,
.add-cart._min .add-cart__minus {
    pointer-events: none;
    opacity: 0.5;
}

/* card-footer */
.card-footer {
    --offset-card: var(--offset-main);
    --bg-card: var(--color-white-06);
    --radius-card: var(--radius-secondary);

    width: 100%;
    max-width: var(--width-card, 100%);
    overflow: hidden;
    border-radius: var(--radius-card);
    background-color: var(--bg-card);
    display: flex;
    position: relative;
    flex-direction: column;
    padding: var(--offset-card);
}
.card-footer__top {
    display: flex;
    align-items: start;
    gap: var(--offset-card);
    padding-bottom: 3rem;
}
.card-footer__content {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.card-footer__logo {
    display: block;
    height: 3.25rem;
    width: auto;
}
.card-footer__logo svg {
    display: block;
    width: auto;
    height: 100%;
}
.card-footer__descr {
    text-wrap: balance;
}
.card-footer__soc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--offset-extrasmall);
    margin-top: auto;
    padding-top: 4rem;
}
.card-footer__descr:not(:first-child) {
    padding-top: var(--offset-secondary);
}
.card-footer__nav {
    padding-top: 0.25rem;
}
.card-footer__nav-title {
    text-transform: uppercase;
}
.card-footer__menu,
.card-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--offset-extrasmall);
}
.card-footer__menu:not(:first-child),
.card-footer__contacts:not(:first-child) {
    padding-top: var(--offset-secondary);
}
.card-footer__contacts-item {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.card-footer__bottom {
    padding-top: var(--offset-big);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--offset-card);
    border-top: 0.0625rem solid var(--color-white-12);
}
@media screen and (min-width: 1024px) {
    .card-footer__content,
    .card-footer__nav {
        flex: 1 0 0;
    }
}

@media screen and (max-width: 1023.5px) {
    .card-footer {
        --offset-card: 1rem;
    }
    .card-footer__top {
        flex-wrap: wrap;
    }
    .card-footer__content,
    .card-footer__nav {
        width: calc((100% - var(--offset-card)) / 2);
        max-width: calc((100% - var(--offset-card)) / 2);
    }
    .card-footer__soc {
        padding-top: var(--offset-main);
    }
    .card-footer__soc .button {
        --size-btn: 3rem;
    }
    .card-footer__nav-title {
        display: none;
    }
    
}
@media screen and (max-width: 767px) {
    .card-footer__content,
    .card-footer__nav {
        width: 100%;
        max-width: 100%;
    }
    .card-footer__menu:not(:first-child),
    .card-footer__contacts:not(:first-child) {
        padding-top: 0rem;
    }
    .card-footer__top {
        padding-bottom: var(--offset-main);
        gap: var(--offset-main);
    }
    .card-footer__bottom {
        padding-top: var(--offset-main);
        flex-direction: column;
        align-items: start;
        gap: var(--offset-extrasmall);
    }
    .card-footer__menu,
    .card-footer__contacts {
        gap: 0.375rem;
    }
    .card-footer__nav {
        padding-top: 0;
    }
}

/* card-simple */
.card-simple {
    --offset-card: var(--offset-secondary);
    --bg-card: transparent;
    --radius-card: var(--radius);
    --aspect-ratio: 916/977;

    width: 100%;
    max-width: var(--width-card, 100%);
    display: flex;
    position: relative;
    flex-direction: column;
    aspect-ratio: var(--aspect-ratio);
}
.card-simple__wrapper {
    flex-grow: 1;
    width: 100%;
    border-radius: var(--radius-card);
    background-color: var(--bg-card);
    padding: var(--offset-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    position: relative;
}
.card-simple__bg,
.card-simple__link {
    border-radius: var(--radius-card);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-simple__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-simple__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--offset-secondary);
    text-align: center;
}

@media screen and (min-width: 1024px) {
    .card-simple__wrapper {
        transform: scale(0.7);
    }
    .card-simple:hover .card-simple__wrapper {
        transform: scale(1);
    }
}
.card-simple:active .card-simple__wrapper {
    transform: scale(1);
}

@media screen and (max-width: 1023.5px) {
    .card-simple {
        aspect-ratio: initial;
        min-height: 12.0625rem;
    }
    .card-simple__content {
        gap: var(--offset-extrasmall);
    }
}


/* card-text */
.card-text {
    --offset-card: var(--offset-big);
    --size-icon-card: 4rem;

    width: 100%;
    max-width: var(--width-card, 100%);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: var(--offset-card);
    text-align: center;
}
.card-text__icon {
    min-width: var(--size-icon-card);
    width: var(--size-icon-card);
    min-height: var(--size-icon-card);
    height: var(--size-icon-card);
}
.card-text__icon svg,
.card-text__icon img {
    display: block;
    width: 100%;
    height: 100%;
}
.card-text__icon img {
    object-fit: contain;
}
.card-text__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--offset-extrasmall);
}
@media screen and (max-width: 1023.5px) {
    .card-text {
        --offset-card: var(--offset-main);
        --size-icon-card: 3rem;
    }
    .card-text__bottom {
        gap: 0.25rem;
    }
}
@media screen and (max-width: 575px) {
    .card-text__content {
        font-size: 1.375rem;
        line-height: 1.27;
    }
}

/* card-banner */
.card-banner {
    --offset-card-content: 6.5rem;
    --width-card-content: 50%;
    --radius-card: 0rem;

    width: 100%;
    max-width: var(--width-card, 100%);
    display: flex;
    position: relative;
    flex-direction: column;
}
.card-banner__wrapper,
.card-banner__content {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}
.card-banner__content {
    padding: var(--height-header, var(--offset-card-content)) var(--offset-card-content);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card-banner__content > * {
    max-width: var(--width-card-content);
}
.card-banner__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.card-banner__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-banner__bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% * 10 / 27);
    background: linear-gradient(180deg, rgba(0, 15, 31, 0) 0%, #000F1F 100%);
}
.card-banner__btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--offset-secondary);
}
.card-banner__descr:not(:first-child) {
    padding-top: var(--offset-main);
}
.card-banner__btns:not(:first-child) {
    padding-top: 3rem;
}

@media screen and (max-width: 1023.5px) {
    .card-banner {
        --offset-card-content: 0rem;
    }
}
@media screen and (max-width: 575px) {
    .card-banner {
        --offset-card-content: 0rem;
        --width-card-content: 100%;
    }
    .card-banner__content {
        padding: calc(var(--height-header, 0rem) + var(--offset-small)) 0 var(--offset-small);
        justify-content: start;
    }
    .card-banner__bg {
        padding-bottom: calc(3rem + var(--offset-secondary) * 2);
    }
    .card-banner__bg::before {
        bottom: calc(3rem + var(--offset-secondary) * 2);
    }
    .card-banner__bg img {
        object-position: bottom;
    }
}

/* card-animation */
.card-animation {
    --witdh-card-image: 78.375rem;
    --offset-card-right: 6.5rem;
    --time-transition: 0.75s;

    --width-card: 18.875rem;

    position: relative;
    width: 100%;
    transition: opacity var(--time-transition);
}

.card-animation__tooltips {
    position: absolute;
    top: var(--offset-card-right);
    right: 0;
}
.card-animation__wrapper {
    position: relative;
}
.card-animation__content {
    width: 100%;
    max-width: calc(100% - var(--offset-card-right));
    margin-right: var(--offset-card-right);
    display: flex;
    justify-content: end;
    position: relative;
}
.card-animation__image {
    width: 100%;
    max-width: var(--witdh-card-image);
}
.card-animation__image img {
    display: block;
    width: 100%;
    object-fit: contain;
    transition: all var(--time-transition);
}
.card-animation__dot {
    position: absolute;
    bottom: 50%;
    right: 0;
    z-index: 5;
    transition: all var(--time-transition);
}
.card-animation__btns {
    position: absolute;
    bottom: 0;
    right: 0;
    transition: all var(--time-transition);
}
.card-animation__tooltip {
    transition: var(--transition);
}
.card-animation__tooltips .card-tooltip {
    min-width: var(--width-card);
    z-index: 999;

    backdrop-filter: blur(0px);
    opacity: 0;
    will-change: backdrop-filter, opacity;
    transform: translateZ(0);
    transition: var(--transition);
}
/**/
.card-animation__tooltip:not(._active) {
    opacity: 1;
    top: 0 !important;
    left: 0 !important;
}
.card-animation__tooltip._active .card-tooltip {
    backdrop-filter: blur(10px);
    opacity: 1;
}

/**/
.card-animation.swiper-slide:not(.swiper-slide-active),
.card-animation.swiper-slide:not(.swiper-slide-active) .card-animation__dot,
.card-animation.swiper-slide:not(.swiper-slide-active) .card-animation__btns {
    opacity: 0;
}
.card-animation.swiper-slide:not(.swiper-slide-active) .card-animation__btns {
    transform: translateY(30%);
}
.card-animation.swiper-slide:not(.swiper-slide-active) .card-animation__image img {
    transform: scale(0);
}

@media screen and (max-width: 1800px) {
    .card-animation {
        --witdh-card-image: 60%;
        --offset-card-right: 0rem;
    }
}

/* card-tooltip */
.card-tooltip {
    --offset-card: var(--offset-main);
    --bg-card: var(--color-grey-32);
    --radius-card: var(--radius);

    width: 100%;
    max-width: var(--width-card, 100%);
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--offset-card);
    color: var(--color-text-extralight);
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-tooltip__title {
    margin-bottom: var(--offset-small);
}
.card-tooltip__descr.content ul:not([class]),
.card-tooltip__descr.content ol:not([class]) {
    padding-left: 0;
}
.card-tooltip__descr.content ul li,
.card-tooltip__descr.content ol li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.card-tooltip__descr.content ul li::before,
.card-tooltip__descr.content ol li::before {
    content: '';
    display: block;
    align-self: start;
    padding-top: 0.25rem;
    width: 1rem;
    min-width: 1rem;
    min-height: 1.25rem;
    height: 1.25rem;
    background-image: url('../../../images/icons/bullet-white.svg');
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

/* card-404 */
.card-404 {
    --offset-card: 3rem;
    --offset-card-secondary: var(--offset-main);
    --bg-card: var(--color-grey-08);
    --radius-card: var(--radius);

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--offset-card-secondary);
    text-align: center;
    overflow: hidden;
    background-color: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--offset-card);
    color: var(--color-text-extralight);
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-404__nav {
    --bgc-divider: var(--color-white-12);
}
.card-404__nav .menu-list {
    justify-content: center;
}

@media screen and (max-width: 1023.5px) {
    .card-404 {
        padding: var(--offset-big) var(--offset-secondary);
        gap: 3rem;
    }
}

/* card-contact */
.card-contact {
    --offset-card: var(--offset-big);
    --gap-card: var(--offset-main);
    --bg-card: var(--color-grey-08);
    --radius-card: var(--radius);

    width: 100%;
    max-width: var(--width-card, 100%);
    display: flex;
    align-items: stretch;
    gap: var(--gap-card);
    position: relative;
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
    padding: var(--offset-card);
    background-color: var(--bg-card);
    border-radius: var(--radius-card);
}
.card-contact__content,
.card-contact__contacts {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
}
.card-contact__content-descr:not(:first-child) {
    margin-top: var(--offset-secondary);
}
.card-contact__contacts {
    gap: var(--offset-card);
}

@media screen and (max-width: 767px) {
    .card-contact {
        --offset-card: var(--offset-secondary);

        flex-direction: column;
    }
    .card-contact__content-descr:not(:first-child) {
        margin-top: var(--offset-small);
    }
}

/* card-link */
.card-link {
    --bg-card: var(--color-white-04);
    --border-card: var(--color-white-12);
    --radius-card: var(--radius);
    --aspect-ratio: 25/8;

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
    background-color: var(--bg-card);
    border: 0.0625rem solid var(--border-card);
    border-radius: var(--radius-card);
    aspect-ratio: var(--aspect-ratio);
    transition: var(--transition);
}
.card-link img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--aspect-ratio);
    filter: grayscale(1) invert(100%) sepia(0%) saturate(7438%) hue-rotate(83deg) brightness(115%) contrast(104%);;
    object-fit: contain;
}
.card-link__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 1024px) {
    .card-link:hover {
        --bg-card: var(--color-extralight);
    }
    .card-link:hover img {
        filter: none;
    }
}
.card-link:active {
    --bg-card: var(--color-extralight);
}
.card-link:active img {
    filter: none;
}

/* card-map */
.card-map {
    --bg-card: var(--color-grey-08);
    --border-card: transparent;
    --radius-card: var(--radius-extrasmall);
    
    width: 100%;
    max-width: var(--width-card, 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 0.0625rem solid var(--border-card);
    padding: var(--offset-secondary) var(--offset-small);
    background-color: var(--bg-card);
    border-radius: var(--radius-card);
}
.card-map__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--offset-small);
    overflow: hidden;
}
.card-map__descr:not(:first-child) {
    margin-top: var(--offset-extrasmall);
}
.card-map__bottom:not(:first-child) {
    margin-top: var(--offset-secondary);
    padding-top: var(--offset-secondary);
    border-top: 0.0625rem solid var(--color-white-08);
}

/**/
.card-map_hover {
    cursor: pointer;
    transition: var(--transition);
}

@media screen and (min-width: 1024px) {
    .card-map_hover:hover {
        --border-card: var(--color-primary);
        --bg-card: var(--color-black-16);
    }   
}
.card-map._active {
    --border-card: var(--color-primary);
}

/* card-download */
.card-download {
    --offset-card: var(--offset-secondary);
    --bg-card: var(--color-grey-08);
    --border-card: transparent;
    --radius-card: var(--radius);
    --size-icon-card: 3.25rem;
    --size-svg-card: 1.75rem;
    
    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0.0625rem solid var(--border-card);
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-download__wrapper {
    width: 100%;
    flex-grow: 1;
    padding: var(--offset-card);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--offset-card);
}
.card-download__body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.card-download__icon {
    margin-left: auto;
    min-width: var(--size-icon-card);
    width: var(--size-icon-card);
    min-height: var(--size-icon-card);
    height: var(--size-icon-card);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-card);
    border: 0.0625rem solid var(--color-white-16);
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-download__icon svg {
    width: var(--size-svg-card);
    height: var(--size-svg-card);
}
.card-download__subtitle:not(:first-child) {
    margin-top: 0.25rem;
}
.card-download_hover::before,
.card-download__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-download_hover::before {
    content: '';
    background-color: var(--color-white-08);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}
.card-download_hover {
    transition: var(--transition);
}

@media screen and (min-width: 1024px) {
    .card-download_hover:hover {
        --bg-card: linear-gradient(0deg, rgba(112, 120, 140, 0.08), rgba(112, 120, 140, 0.08)), radial-gradient(50% 50% at 0% 0%, #253357 0%, rgba(37, 51, 87, 0) 100%);
        --border-card: var(--color-primary);
    }
    .card-download_hover:hover::before {
        opacity: 1;
    }
}

@media screen and (max-width: 1023.5px) {
    .card-download {
        --size-svg-card: 1.5rem;
    }
}

/* card-carousel */
.card-carousel {
    --offset-card: var(--offset-main);
    --offset-card-content: var(--offset-big);
    --bg-card: transparent;
    --radius-card: 0rem;
    --size-btn-card: var(--size-btn-block);

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.card-carousel__container {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 64.26% 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--offset-medium) var(--offset-card);
}
.card-carousel__title {
    grid-column: 2 / 3;
}
.card-carousel__image {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    grid-row: 1 / 3;
    height: 100%;
}
.card-carousel__image img {
    display: block;
    width: 100%;
    height: 100%;
}
.card-carousel__image-card.card-content {
    --width-card: 28.125rem;

    position: absolute;
    bottom: var(--offset-card-content);
    left: var(--offset-card-content);
    width: calc(100% - var(--offset-card-content) * 2);
    max-height: calc(100% - var(--offset-card-content) * 2);
}
.card-carousel__image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-carousel__content {
    padding-bottom: calc(var(--size-btn-card) + var(--offset-main));
    display: flex;
    flex-direction: column;
    gap: var(--offset-card-content);
}

@media screen and (min-width: 1440px) {
    .card-carousel__title,
    .card-carousel__content {
        padding-left: var(--offset-card-content);
        padding-right: var(--offset-card-content);
    }
}

@media screen and (max-width: 1439px) {
    .card-carousel {
        --offset-card-content: var(--offset-secondary);
    }
    .card-carousel__container {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 1023.5px) {
    .card-carousel {
        --offset-card: var(--offset-secondary);
        --bg-card: var(--color-grey-32);
        --radius-card: var(--radius);

        padding: var(--offset-card) 0;
    }
}
@media screen and (max-width: 767px) {
    .card-carousel__container {
        display: flex;
        flex-direction: column;
    }
    .card-carousel__title {
        grid-column: initial;
        max-width: calc(100% - var(--size-btn-card) * 2 - var(--offset-small));
        min-height: 3.5rem;
    }
    .card-carousel__image {
        grid-row: initial;
        height: auto;
    }
    .card-carousel__content {
        padding-bottom: 0;
    }
    .card-carousel__image-card.card-content {
        --width-card: 100%;

        --bg-card: var(--color-grey-08);
        
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 100%;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .card-carousel__image-card.card-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: var(--blur);
        -webkit-backdrop-filter: var(--blur);
        -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8) 35%);
        mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8) 35%);
        will-change: top, backdrop-filter;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
    }
    .card-carousel__image-card.card-content > * {
        position: relative;
    }
}



/* card-content */
.card-content {
    --offset-card: var(--offset-main);
    --bg-card: var(--color-grey-08);
    --radius-card: var(--radius);
    --size-icon-card: 3rem;
    
    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--offset-medium);
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: var(--offset-card);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-content__icon {
    display: block;
    min-width: var(--size-icon-card);
    width: var(--size-icon-card);
    min-height: var(--size-icon-card);
    height: var(--size-icon-card);
}
.card-content__icon img,
.card-content__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
.card-content__icon img {
    object-fit: contain;
}

@media screen and (max-width: 1023.5px) {
    .card-content {
        --offset-card: var(--offset-small);
        --size-icon-card: 1.25rem;

        gap: var(--offset-extrasmall);
    }
}


/* card-diagram */
.card-diagram {
    --offset-card: var(--offset-big);
    --bg-card: var(--color-grey-08);
    --radius-card: var(--radius);
    
    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--offset-card);
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: var(--offset-card);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-diagram__image {
    width: 100%;
    overflow: hidden;
}
.card-diagram__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-diagram__content {
    display: flex;
    flex-direction: column;
    gap: var(--offset-secondary);
}
.card-diagram__title-big {
    font-size: 3.5rem;
    line-height: 1;
}

@media screen and (max-width: 1023.5px) {
    .card-diagram {
        --offset-card: var(--offset-secondary);
    }
    .card-diagram__title-big {
        font-size: 3rem;
    }
}

/* card-documents */
.card-documents {
    --offset-card: var(--offset-big);
    --bg-card: var(--color-grey-08);
    --radius-card: var(--radius);
    
    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--offset-main);
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: var(--offset-card);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-documents__items {
    margin-bottom: calc(var(--offset-card) * -1);
    margin-right: calc(var(--offset-card) / 2 * -1);
    padding-bottom: var(--offset-card);
}
.card-documents__items > * + * {
    margin-top: var(--offset-extrasmall);
}

@media screen and (max-width: 1023.5px) {
    .card-documents {
        --offset-card: var(--offset-secondary);

        gap: var(--offset-card);
    }
}
@media screen and (max-width: 575px) {
    .card-documents__items {
        overflow-y: initial;
        max-height: fit-content;
    }
}

/* card-product */
.card-product {
    --offset-card: var(--offset-big);
    --bg-card: var(--color-grey-08);
    --border-card: transparent;
    --radius-card: var(--radius);
    --width-image-card: 18.75rem;
    
    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--offset-main);
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: var(--offset-card);
    border: 0.0625rem solid var(--border-card);
    transition: var(--transition);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-product__image,
.card-product__video {
    display: block;
    width: 100%;
    max-width: var(--width-image-card);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}
.card-product__video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black-24);
    transition: var(--transition);
}
.card-product__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.card-product__image img,
.card-product__video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-product__content {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--offset-small);
}
.card-product__title {
    transition: var(--transition);
}
.card-product__descr {
    margin-top: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.card-product__btn {
    position: absolute;
    top: var(--offset-card);
    right: var(--offset-card);
    transition: var(--transition);
}
.card-product__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**/
.card-product_horizontal-big {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.card-product_horizontal-big .card-product__image, 
.card-product_horizontal-big .card-product__video {
    max-width: 100%;
}
.card-product_horizontal-big .card-product__content {
    align-self: end;
    gap: var(--offset-secondary);
}
.card-product_horizontal-big .card-product__image, 
.card-product_horizontal-big .card-product__video {
    margin: calc(var(--offset-card) * -1);
    margin-right: 0;
    max-width: calc(100% + var(--offset-card));
    width: calc(100% + var(--offset-card));
}

/**/
.card-product_hover .card-product__btn {
    opacity: 0;
}

@media screen and (min-width: 1024px) {

    .card-product_horizontal {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .card-product_horizontal .card-product__image, 
    .card-product_horizontal .card-product__video {
        max-width: 100%;
    }
    .card-product_horizontal .card-product__content {
        align-self: end;
        gap: var(--offset-secondary);
    }


    .card-product_hover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: var(--transition);
        background-color: var(--color-white-04);
        opacity: 0;
    }
    .card-product_hover:hover:before {
        opacity: 1;
    }
    .card-product_hover:hover .card-product__title {
        color: var(--color-primary);
    }
    .card-product_hover:hover .card-product__video-play {
        --btn-bg: var(--color-primary);
        --btn-color: var(--color-text);
    }
    .card-product_hover:hover .card-product__btn {
        opacity: 1;
    }
}

@media screen and (max-width: 1023.5px) {
    .card-product {
        --offset-card: var(--offset-secondary);
        --width-image-card: 11.9375rem;

        gap: var(--offset-secondary);
    }
    .card-product__image,
    .card-product__video {
        height: 6.75rem;
    }
    .card-product_horizontal-big .card-product__image, 
    .card-product_horizontal-big .card-product__video {
        height: 21.4375rem;
    }
    .card-product_horizontal-big {
        grid-template-columns: 100%;
    }
    .card-product_horizontal-big .card-product__image, 
    .card-product_horizontal-big .card-product__video {
        margin-right: calc(var(--offset-card) * -1);
        margin-bottom: calc(var(--offset-card) * -1);
        max-width: calc(100% + var(--offset-card) * 2);
        width: calc(100% + var(--offset-card) * 2);
        height: calc(100% + var(--offset-card));
    }
    .card-product_horizontal-big .card-product__content {
        gap: var(--offset-small);
    }
    .card-product_horizontal-big .card-product__title {
        font-size: 1.125rem;
        line-height: 1.33;
    }
    .card-product:not(.card-product_horizontal-big) .card-product__video-play {
        display: none;
    }
    .card-product_hover .card-product__btn,
    .card-product__btn {
        opacity: 1;
    }
    .card-product_horizontal-big .card-product__btn {
        display: none;
    }
}

/* card-item */
.card-item {
    --offset-card: var(--offset-big);
    --offset-card-secondary: var(--offset-secondary);
    --bg-card: var(--color-grey-08);
    --border-card: transparent;
    --radius-card: var(--radius);
    --width-images: 52.75rem;
    --height-image: 10.25rem;

    --columns-chars: 3;

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    z-index: 1;
    transition: var(--transition);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-item__top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.card-item__top-title {
    padding: var(--offset-card);
}
.card-item__top-body {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: var(--width-images);
}
.card-item__top-image {
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}
.card-item__top-image img {
    min-height: var(--height-image);
    height: var(--height-image);
    max-height: var(--height-image);
    display: block;
    width: auto;
}
.card-item__top-badges {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--offset-extrasmall);
    padding: var(--offset-card);
}
/**/
.card-item__content {
    display: grid;
    align-items: stretch;
    grid-template-columns: 1fr var(--width-images);
    gap: var(--offset-card);
}
.card-item__descr:not(:first-child) {
    margin-top: var(--offset-card-secondary);
}
.card-item__slider {
    grid-row: span 2;
}
.card-item__items {
    grid-row: 2 / 3;
}
.card-item__body {
    padding-top: var(--offset-card);
    padding-left: var(--offset-card);
}
.card-item__items {
    padding-bottom: var(--offset-card);
    padding-left: var(--offset-card);
}
.card-item__select {
    max-width: calc((100% - var(--offset-card-secondary)) / 2);
}
.card-item__chars {
    padding-top: var(--offset-card);
    display: flex;
    flex-wrap: wrap;
    gap: var(--offset-main) var(--offset-card-secondary);
}
.card-item__chars-item {
    max-width: calc((100% - var(--offset-card-secondary) * (var(--columns-chars) - 1)) / var(--columns-chars));
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.card-item__top-content {
    overflow: hidden;
}
.card-item:not(._active) .card-item__content {
    overflow: hidden;
}
.card-item__top,
.card-item__wrapper {
    transition: var(--transition);
    display: grid;
    grid-template-rows: 1fr;
}

/**/
.card-item._active .card-item__top,
.card-item:not(._active) .card-item__wrapper {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

@media screen and (min-width: 576px) {
    .card-item__top-btn {
        display: none;
    }
}

@media screen and (max-width: 1439px) {
    .card-item {
        --width-images: 50%;
        --height-image: 7rem;
    }
    .card-item__select {
        max-width: 100%;
    }
}
@media screen and (max-width: 1023.5px) {
    .card-item {
        --offset-card: var(--offset-secondary);
        --columns-chars: 2;
    }
}
@media screen and (max-width: 767px) {
    .card-item__content {
        grid-template-columns: 100%;
    }
    .card-item__slider {
        grid-row: initial;
        margin-bottom: 0;
        padding-bottom: 1.6875rem;
    }
    .card-item__chars {
        gap: var(--offset-medium) var(--offset-secondary);
    }
    .card-item__items {
        grid-row: initial;
    }
    .card-item__descr:not(:first-child) {
        margin-top: var(--offset-small);
    }
    .card-item__items .field .input {
        --height-input: 3.5rem;
    }
    .card-item__items .field .input:not(select):focus ~ .field__caption,
    .card-item__items .field .input:not(select):not(:placeholder-shown):not(.input-block) ~ .field__caption,
    .card-item__items .field .field__caption-static {
        top: 0.5rem;
    }
}
@media screen and (max-width: 575px) {
    .card-item:not(._active) .card-item__top {
        height: 12.0625rem;
    }
    .card-item__top-badges {
        display: none;
    }
    .card-item__top-title {
        position: relative;
        z-index: 1;
    }
    .card-item__top-content {
        align-items: start;
    }
    .card-item__top-body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        border-radius: var(--radius-card);
        overflow: hidden;
    }
    .card-item__top-image {
        width: 100%;
        height: 100%;
    }
    .card-item__top-image img {
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0;
    }
    .card-item__top-btn {
        position: absolute;
        bottom: var(--offset-card);
        right: var(--offset-card);
    }
}

/* card-slider */
.card-slider {
    --offset-card: var(--offset-big);
    --bg-card: var(--color-grey-08);
    --border-card: transparent;
    --radius-card: var(--radius);

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    transition: var(--transition);
    padding: var(--offset-card);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-slider__top {
    display: flex;
    align-items: center;
    gap: var(--offset-small);
    justify-content: space-between;
}
.card-slider__swiper {
    max-width: 100%;
    width: 100%;
}
.card-slider__slide {
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
}
.card-slider__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
}
.card-slider__descr {
    margin-top: var(--offset-secondary);
}

@media screen and (min-width: 1024px) {
    .card-slider__swiper {
        margin: var(--offset-card) calc(var(--offset-card) * -1) calc(var(--offset-card) * -1);
        width: calc(100% + var(--offset-card) * 2);
        max-width: calc(100% + var(--offset-card) * 2);
    }
    .card-slider__descr {
        grid-row: 2 / 3;
    }
}
@media screen and (max-width: 1023.5px) {
    .card-slider__swiper {
        margin-top: var(--offset-secondary);
    }
    .card-slider {
        --offset-card: var(--offset-secondary);
        --bg-card: var(--color-grey-32);
    }
}

/* card-aside */
.card-aside {
    --offset-card: var(--offset-main);
    --bg-card: var(--color-grey-08);
    --border-card: transparent;
    --radius-card: var(--radius-extrasmall);

    --width-image: 11.9375rem;

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: var(--transition);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-aside__wrapper {
    position: relative;
    width: 100%;
    height: auto;
    padding: var(--offset-card);
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.card-aside__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-aside__bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-navy-dark-56);
}
.card-aside__bg img {
    display: block;
    width: 100%;
    height: 100%;
}
.card-aside__image {
    width: var(--width-image);
    min-width: var(--width-image);
    overflow: hidden;
    border-radius: var(--radius-card);
    height: auto;
    display: flex;
    flex-direction: column;
}
.card-aside__image img {
    flex-grow: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-aside__btn {
    --size-svg: 1.75rem;
}
.card-aside__title {
    transition: var(--transition);
}
.card-aside__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 1024px) {
    .card-aside_hover:hover .card-aside__title {
        color: var(--color-primary);
    }
}

@media screen and (max-width: 1023.5px) {
    .card-aside {
        --offset-card: var(--offset-secondary);
        --width-image: 100%;

        flex-direction: column;
    }
    .card-aside__image {
        order: -1;
    }
}

/* card-partners */
.card-partners {
    --offset-card: var(--offset-secondary);
    --bg-card: var(--color-grey-32);
    --border-card: transparent;
    --radius-card: var(--radius-extrasmall);
    
    --size-icon-card: 2rem;
    --height-logo: 2.25rem;

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    padding: var(--offset-secondary);
    transition: var(--transition);

    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}
.card-partners__top {
    padding-bottom: var(--offset-card);
    border-bottom: 0.0625rem solid var(--color-white-12);
}
.card-partners__logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--offset-extrasmall);
}
.card-partners__logo-icon {
    display: block;
    height: var(--height-logo);
}
.card-partners__logo-icon img,
.card-partners__logo-icon svg {
    display: block;
    height: 100%;
}
.card-partners__logo-icon img {
    object-fit: contain;
}
.card-partners__logo > svg {
    display: block;
    min-width: var(--size-icon-card);
    width: var(--size-icon-card);
    min-height: var(--size-icon-card);
    height: var(--size-icon-card);
}
.card-partners__btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--offset-card);
}
.card-partners__btn svg {
    display: block;
    min-width: var(--size-icon-medium);
    width: var(--size-icon-medium);
    min-height: var(--size-icon-medium);
    height: var(--size-icon-medium);
}
.card-partners__btn svg {
    transition: var(--transition);
}
.card-partners__content {
    display: flex;
    flex-direction: column;
    gap: var(--offset-card);
    overflow: hidden;
    transition: var(--transition);
}
.card-partners__wrapper {
    display: grid;
    grid-template-rows: 1fr;
    transition: var(--transition);
}
.card-partners:not(._active) .card-partners__wrapper {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}
.card-partners._active .card-partners__content {
    padding-top: var(--offset-card);
}
.card-partners._active .card-partners__btn svg {
    transform: rotate(180deg);
}

/* card-media */
.card-media {
    --height-image: 11.25rem;

    width: 100%;
    max-width: var(--width-card, 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.card-media__image {
    align-self: center;
    height: var(--height-image);
    width: 100%;
    position: relative;
}
.card-media__image img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.card-media__dot {
    position: absolute;
    bottom: 0;
    right: var(--grid-gap);
}
.card-media__content {
    display: flex;
    flex-direction: column;
}
.card-media__content:not(:first-child) {
    margin-top: var(--offset-main);
}
.card-media__descr:not(:first-child) {
    margin-top: var(--offset-small);
}