@layer components-widgets {
    .composite-banner__header-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
        background: var(--tertiary-blue)
    }

    .composite-banner__header {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        max-width: 841px;
        margin-top: 148px;
        padding-bottom: 80px
    }

    @media screen and (max-width: 1279px) {
        .composite-banner__header {
            max-width:500px;
            margin-top: 40px;
            padding-inline:16px}
    }

    .composite-banner__img-wrapper {
        background: linear-gradient(180deg, var(--tertiary-blue) 59%, var(--primary-blue) 59%, var(--primary-blue) 100%)
    }

    .composite-banner__img {
        border-radius: var(--br4)
    }

    .composite-banner__desc-wrapper {
        padding-bottom: 80px;
        color: var(--primary-white);
        background: var(--primary-blue)
    }

    @media screen and (max-width: 1279px) {
        .composite-banner__desc-wrapper {
            padding-bottom:64px
        }
    }

    .composite-banner__cards-wrapper {
        margin-top: 150px
    }

    @media screen and (max-width: 1279px) {
        .composite-banner__cards-wrapper {
            justify-content:space-between;
            margin-top: 64px
        }
    }

    @media screen and (max-width: 767px) {
        .composite-banner__cards-wrapper {
            margin-top:54px;
            row-gap: 40px
        }
    }

    .composite-banner__desc-card {
        display: flex;
        gap: 16px
    }

    @media screen and (max-width: 1279px) {
        .composite-banner__desc-card {
            flex-direction:column;
            gap: 8px
        }
    }

    .composite-banner_bg-reverse .composite-banner__header-wrapper {
        color: var(--primary-white);
        background: var(--primary-blue)
    }

    .composite-banner_bg-reverse .composite-banner__desc-wrapper {
        color: var(--primary-black);
        background: var(--tertiary-blue)
    }

    .composite-banner_bg-reverse .composite-banner__img-wrapper {
        background: linear-gradient(180deg, var(--primary-blue) 59%, var(--tertiary-blue) 59%, var(--tertiary-blue) 100%)
    }
}