@layer components-entities {
    .banner-image {
        display: flex;
        overflow: hidden;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: calc(100vh - var(--header-height));
        min-height: 518px;
        max-height: 1000px;
        row-gap: 40px
    }

    @media screen and (max-width: 1279px) {
        .banner-image {
            height: calc(100vh - var(--header-height) - 32px);
            max-height: 708px;
            padding: 0 12px
        }
    }@media screen and (max-width: 767px) {
    .banner-image {
        row-gap: 12px;
        max-height: 518px
    }
}.banner-image__top {
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     max-width: 841px;
     margin-top: 98px
 }

    @media screen and (max-width: 1279px) {
        .banner-image__top {
            margin-top: 64px
        }
    }.banner-image__text {
         text-align: center
     }

    .banner-image__image-banner {
        max-width: 920px
    }

    .banner-image__image-banner_big {
        max-width: 1200px
    }

    .banner-image__image-banner_medium {
        max-width: 512px
    }

    @media screen and (max-width: 1279px) {
        .banner-image__image-banner_medium {
            max-width: 320px
        }
    }@media screen and (max-width: 767px) {
    .banner-image__image-banner_medium {
        max-width: 256px
    }
}.banner-image__image-banner_small {
     max-width: 313px
 }

    @media screen and (max-width: 1279px) {
        .banner-image__image-banner_small {
            max-width: 217px
        }
    }@media screen and (max-width: 767px) {
    .banner-image__image-banner_small {
        max-width: 183px
    }
}.banner-image_purple {
     background: var(--purple)
 }

    .banner-image_blue {
        background: var(--blue)
    }

    .banner-image_default-blue {
        background: var(--default-blue)
    }

    .banner-image_green {
        background: var(--green)
    }

    .banner-image_dark-green {
        background: var(--secondary-green)
    }

    .banner-image_dark-blue {
        background: var(--dark-blue)
    }

    .banner-image_grey {
        background: var(--grey)
    }

    .banner-image_light-grey {
        background: var(--light-grey)
    }

    .banner-image_gray {
        background: var(--gray)
    }

    .banner-image_tertiary-blue {
        background: var(--tertiary-blue)
    }

    .banner-image_purple-radial {
        background-image: url(images/bg-credit-card.webp);
        background-size: cover
    }

    .banner-image_grey-radial {
        background-image: url(images/bg-payment-sticker.webp);
        background-size: cover
    }

    .banner-image_pink-radial {
        background-image: url(images/debit-card-detail-bg.webp);
        background-size: cover
    }

    .banner-image_without-img {
        height: auto;
        min-height: 440px
    }

    .banner-image_without-img .banner-image__top {
        margin-top: 148px
    }

    @media screen and (max-width: 1279px) {
        .banner-image_without-img .banner-image__top {
            margin-top: 80px
        }
    }@media screen and (max-width: 767px) {
    .banner-image_without-img .banner-image__top {
        margin-top: 64px
    }
}@media screen and (max-width: 1279px) {
    .banner-image_without-img {
        min-height: 320px
    }
}@media screen and (max-width: 767px) {
    .banner-image_without-img {
        min-height: 280px
    }
}@media screen and (max-width: 1279px) {
    .banner-image_short {
        max-height: 518px
    }
}.banner-image_auto {
     height: auto;
     min-height: auto
 }
}