/* Start:/local/components/banners/main.banner/templates/default/style.css?17823025664384*/
.main-banner {
    --base-width: 1905px; /* ширина макета от которой считам динамический пиксель */
    --pixel-size: calc(100vw / var(--base-width));

    display: flex;

    height: calc(var(--pixel-size) * 507px);

    padding: calc(var(--pixel-size) * 50px) 0;

    background-image: var(--bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main-banner__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: calc(100% - var(--pixel-size) * 624px);
    margin: auto;
}
.main-banner__top,
.main-banner__bottom,
.main-banner__content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pixel-size) * 12px);
}

.main-banner__logo {
    display: flex;
}

.main-banner__logo img {
    width: calc(var(--pixel-size) * 413px);
    height: auto;
}


.main-banner__subtitle {
    font-size: calc(var(--pixel-size) * 24px);
    line-height: calc(var(--pixel-size) * 28px);
}

.main-banner__text {
    font-size: calc(var(--pixel-size) * 18px);
    line-height: calc(var(--pixel-size) * 23px);
}

.main-banner__product {
    display: flex;
}

.main-banner__product img {
    width: calc(var(--pixel-size) * 386px);
    height: auto;
}

.main-banner__buttons {
    display: flex;
    gap: calc(var(--pixel-size) * 18px);
}

.base-button.main-banner__button {
    display: flex;
    align-items: center;
    height: calc(var(--pixel-size) * 50px);
    width: calc(var(--pixel-size) * 230px);
    font-size: calc(var(--pixel-size) * 16px);
    padding: 0;
}

.main-banner__note {
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

/* Themes */

[data-theme="white"] {
    color: white;
}

[data-theme="white"] .base-button {
    color: #0068A5;
    border-color: white;
    background: white;
}

[data-theme="white"] .base-button:active,
[data-theme="white"] .base-button:hover {
    background: white;
    border-color: #0068A5;
    color: #0068A5;
}

[data-theme="white"] .base-button--outline {
    color: white;
    border-color: white;
    background: transparent;
}

[data-theme="white"] .base-button--outline:active,
[data-theme="white"] .base-button--outline:hover {
    background: white;
    border-color: white;
    color: #0068A5;
}

@media screen and (max-width: 1024px) {
    .main-banner {
        --base-width: 768px;
        height: calc(var(--pixel-size) * 821px);
        background-image: var(--bg-tablet);
        padding: 0;
    }

    .main-banner__wrapper {
        max-width: calc(100% - var(--pixel-size) * 46px);
    }

    .main-banner__content {
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        gap: 0;
        padding: calc(var(--pixel-size) * 94px) 0 calc(var(--pixel-size) * 68px);
    }

    .main-banner__top {
        gap: 0;
        align-items: center;
    }

    .main-banner__bottom {
        gap: calc(var(--pixel-size) * 20px);
        align-items: center;
    }

    .main-banner__product img {
        width: calc(var(--pixel-size) * 356px);
    }

    .base-button.main-banner__button {
        height: calc(var(--pixel-size) * 56px);
    }
}

@media screen and (max-width: 767px) {
    .main-banner {
        --base-width: 375px;
        height: calc(var(--pixel-size) * 667px);
        background-image: var(--bg-mob);
    }

    .main-banner__wrapper {
        max-width: calc(100% - var(--pixel-size) * 40px);
    }

    .main-banner__content {
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding: calc(var(--pixel-size) * 30px) 0 calc(var(--pixel-size) * 24px);
    }

    .main-banner__top {
        gap: 0;
        align-items: flex-start;
    }

    .main-banner__bottom {
        gap: calc(var(--pixel-size) * 10px);
    }

    .main-banner__subtitle {
        font-size: calc(var(--pixel-size) * 18px);
        line-height: calc(var(--pixel-size) * 23px);
    }

    .main-banner__buttons {
        flex-direction: column;
        gap: calc(var(--pixel-size) * 10px);
    }

    .main-banner__product img {
        width: calc(var(--pixel-size) * 335px);
    }
}

/* End */
/* /local/components/banners/main.banner/templates/default/style.css?17823025664384 */