.banner-wrapper {
    container-type: inline-size;
    container-name: banner;
    background: linear-gradient(180deg, #06152E 0%, #2B62A8 100%);
    box-shadow: 0px 0px 32px 0px #28293D0D;
    padding-top: 16px;
    padding-bottom: 16px;
}

.banner {
    border-radius: 16px;
    color: #fff;
    max-width: 1125px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
}

.banner-wrapper.banner-closed {
    display: none;
}

.banner-header {
    display: flex;
    gap: 16px;
    align-items: center;
}

.banner p:empty,
.banner-header p:empty {
	display: none;
}

.banner-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.banner-title {
    font-size: clamp(14px, 4cqi, 16px);
    font-weight: 700;
    margin: 0;
}

.banner-description {
    font-size: 12px;
    margin: 0;
}

.banner-buttons {
    display: flex;
    gap: 12px;
}

.banner-close {
    background: transparent;
    font-family: Inter;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
	color: #fff;
    line-height: 22px;
    padding: 9px 16px;
    border: 1px solid #FFFFFF;
}

.banner-wrapper .banner .banner-buttons .banner-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #101828 !important;
    background: #FFFFFF;
}

@container banner (max-width: 765px) {
    .banner-description {
       display: none;
    }

    .banner-buttons {
        justify-content: center;
    }

    .banner {
        flex-direction: column;
        padding-left: 16px;
        gap: 16px;
        padding-right: 16px;
    }

    .banner-close,
    .banner-more {
        width: 100%;
    }

    .banner-header {
        justify-content: space-between;
        flex-direction: row-reverse;
    }
}