.banner-main-page-wrapper{
    margin-top: 40px;
    max-width: 1920px;
    margin-inline: auto;
    picture.lazy::before {
        content: '';
        position: absolute;
        left: calc(50% - 30px);
        top: calc(50% - 30px);
        z-index: -1;
        display: block;
        width: 60px;
        height: 60px;
        background:
                url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M30 8a22 22 0 1 1-15.56 6.44' stroke='%23C1C2C9' opacity='.45'/%3E%3Cpath d='M30 8a22 22 0 0 1 22 22' stroke='%23FDBC00'/%3E%3Cpath d='M14.44 45.56A22 22 0 0 1 8 30' stroke='%23920600'/%3E%3C/g%3E%3C/svg%3E")
                no-repeat center center / contain;
        animation: spinner 1s infinite linear;
    }
    .h5{
        font-weight: 700;
        text-transform: uppercase;
        font-size: 1rem;
        color:var(--color-primary-black)
    }

    .banner {
        width: 100%;
        max-width: 1920px;
        margin-inline: auto;
        text-align: center;
    }

    .banner__title{
        text-align: center;

    }  .banner__subtitle {
        text-align: center;

        margin-top: 10px;
    }

    /* Swiper */
    .swiper-pagination {
        position: absolute;
        left: 50%!important;
        margin-top: 10px!important;
        transform: translateX(-50%)!important;
        gap: 8px!important;
        bottom:unset!important;
    }

    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        border-radius: 999px !important;
        cursor: pointer !important;
        transform: translateZ(0) !important;
        transition:
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s linear !important;
        will-change: width, background-color !important;
    }

    .swiper-pagination-bullet-active {
        width: 20px !important;
        border-radius: 999px !important;
        background-color: #41434B !important;
    }

    .banner__swiper-wrapper {
        margin-top: 40px;
    }

    .banner__swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
        display: none;
    }

    /* Slider */
    .banner__slider-erid {
        color: #fff;
    }

    .banner__slider-erid-notice {
        position: absolute;
        bottom: 5px;
        left: 5px;
        flex-direction: column;
        color: #F1F1F1;
        font-size: 10px;
    }

    .banner__slider-item {
        display: grid;
        align-items: center;
        width: 100%;
    }

    .banner__slider-item-title {
        font-size: 13px;
    }

    .banner__slider-item-text {
        font-size: 12px;
    }

    .banner__slider-item-content {
        display: flex;
        flex-direction: column;
        grid-area: 1 / 1 / 2 / 2;
        width: 55vw;
        max-width: 45%;
        margin-left: 20px;
        padding: 20px;
        border-radius: 20px;
        color: #fff;
        text-align: left;
        line-height: 1.2;
        text-wrap: balance;
        background-color: rgba(21, 22, 24, 0.7);
        gap: 10px;
    }

    .banner__slider-item-content .btn {
        height: 25px;
        font-size: 11px;
    }

    .banner__slider-item-image {
        display: flex;
        grid-area: 1 / 1 / 2 / 2;
        width: 100%;
        height: 250px;
    }

    /* Picture */
    .banner-picture {
        width: 100%;
    }

    .banner-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Navigation */
    .banner__navigation {
        display: flex;
        flex-direction: column;
        margin-top: 58px;
        gap: 20px;
    }

    .banner__navigation-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border: 1px solid #C1C2C9;
        border-radius: 20px;
        text-align: left;
        background-color: #fff;
        transition:
                box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 1, 1);
        will-change: box-shadow, border-color;
        gap: 20px;
    }

    .banner__navigation-item img {
        max-width: 60px;
    }

    @media (hover: hover) {
        .banner__navigation-item:hover {
            border-color: #fff;
            box-shadow:
                    0 9px 10px 0 rgba(24, 39, 75, 0.06),
                    0 7px 36px 0 rgba(24, 39, 75, 0.08),
                    0 12px 28px 0 rgba(24, 39, 75, 0.12);
        }
    }

    /* xs: 450px */
    @media (min-width: 450px) {
        .banner__slider-item-image {
            height: 300px;
        }

        .banner__slider-item-title {
            font-size: 16px;
        }

        .banner__slider-item-text {
            font-size: 13px;
        }

        .banner__slider-item-content .btn {
            height: 30px;
            margin-top: 10px;
            font-size: 1rem;
        }
    }

    /* sm: 576px */
    @media (min-width: 576px) {
        .banner__swiper-wrapper {
            margin-top: 50px;
        }

        .banner__slider-erid-notice {
            flex-direction: row;
            justify-content: space-between;
        }

        .banner__slider-item-image {
            height: 380px;
        }

        .banner__slider-item-title {
            font-size: 24px;
        }

        .banner__slider-item-text {
            font-size: 16px;
        }

        .banner__slider-item-content {
            width: 57vw;
            max-width: 420px;
            padding: 35px;
        }

        .banner__slider-item-content .btn {
            width: 100%;
            max-width: 180px;
            height: 50px;
            margin-top: 10px;
        }

        .banner__subtitle {
            margin-top: 20px;
        }

        .banner__navigation {
            flex-direction: row;
            flex-wrap: wrap;
        }

        .banner__navigation-item {
            flex-direction: column;
            width: calc(50% - 10px);
            text-align: center;
        }
    }

    /* lg: 960px */
    @media (min-width: 960px) {
        margin-top: 60px;

        .swiper-pagination {
            margin-top: 20px;
            gap: 10px;
        }

        .swiper-pagination-bullet {
            width: 13px!important;
            height: 13px!important;
        }

        .swiper-pagination-bullet-active {
            width: 26px!important;
        }

        .banner__slider-item-image {
            height: 440px;
        }

        .banner__slider-item-title {
            font-size: 30px;
        }

        .banner__slider-item-text {
            font-size: 20px;
        }

        .banner__navigation {
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 78px;
        }

        .banner__navigation-item {
            flex: 1;
            width: auto;
            padding: 30px 10px;
        }

        .banner__navigation-item img {
            max-width: 90px;
            transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
        }

        .banner__navigation-item:hover img {
            transform: scale(1.05);
        }
    }

    /* xl: 1200px */
    @media (min-width: 1200px) {
        .banner__slider-item-content {
            margin-left: 19vw;
        }
    }

    /* xxl: 1400px */
    @media (min-width: 1400px) {
        .banner__slider-item-image {
            height: 500px;
        }

        .banner__slider-item-title {
            font-size: 35px;
        }

        .banner__slider-item-text {
            font-size: 24px;
        }

        .banner__slider-item-content {
            max-width: 470px;
            padding: 40px;
        }
    }
}