.promotional-banner {
    background: linear-gradient(164deg,#0000 28.52%,#00000080 47.14%),url(../images/promo-banner-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #004868
}

    .promotional-banner p {
        color: #fff
    }

.promotional-banner__content {
    padding: 40px 24px;
    color: #fff
}

@media (min-width: 821px) {
    .promotional-banner__content {
        display: flex;
        gap: 16px;
        padding: 56px 40px;
        gap: 40px
    }
}

@media (min-width: 821px) and (min-width: 821px) {
    .promotional-banner__content {
        gap: 32px
    }
}

@media (min-width: 821px) {
    .promotional-banner__content > * {
        flex: 1 1 calc(50% - 16px);
        width: calc(50% - 16px)
    }
}

@media (min-width: 821px) and (min-width: 821px) {
    .promotional-banner__content > * {
        flex: 1 1 calc(50% - 32px);
        width: calc(50% - 32px)
    }
}

@media (min-width: 992px) {
    .promotional-banner__content {
        max-width: 1440px;
        padding: 80px 24px
    }
}

@media (min-width: 992px) and (min-width: 821px) {
    .promotional-banner__content {
        padding-right: 64px;
        padding-left: 64px;
        margin: 0 auto
    }
}

.promotional-banner__eyebrow {
    font-family: DM Sans,sans-serif;
    font-size: 12px;
    line-height: 145%;
    font-weight: 700;
    letter-spacing: 1.6;
    margin-bottom: 12px;
    color: #fff;
    font-size: 1rem
}

.promotional-banner__heading {
    margin-bottom: 16px;
    color: #fff
}

.promotional-banner__subhtext {
    margin-bottom: 32px;
    color: #fff
}

.promotional-banner--narrow .promotional-banner__content {
    flex-direction: column
}

    .promotional-banner--narrow .promotional-banner__content > * {
        flex: 1 1 calc(100% - 16px);
        width: calc(100% - 16px)
    }

@media (min-width: 821px) {
    .promotional-banner--narrow .promotional-banner__content > * {
        flex: 1 1 calc(100% - 32px);
        width: calc(100% - 32px)
    }
}
