.ce_banner {
    color: var(--color-text-light);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
}

/* Progressive enhancement: only JavaScript can hide an offscreen banner. */
.ce_banner--reveal-pending {
    opacity: 0;
    transform: translateY(30px);
}

.ce_banner--reveal-enter {
    animation: ce-banner-fade-up 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ce-banner-fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ce_banner--reveal-pending { opacity: 1; transform: none; }
    .ce_banner--reveal-enter { animation: none; }
}

.ce_banner__panel {
    position: relative;
    isolation: isolate;
    padding: var(--spacing-md);
    border-radius: var(--radius-list);
    overflow: hidden;
    background: var(--color-primary);
}

.ce_banner__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ce_banner__panel--has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-primary) 87%, transparent);
    pointer-events: none;
}

.ce_banner__layout {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: end;
    gap: var(--spacing-lg);
    min-width: 0;
}

.ce_banner__copy,
.ce_banner__offer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.ce_banner p,
.ce_banner__heading {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ce_banner__label {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ce_banner__label::before {
    content: '';
    flex: 0 0 var(--spacing-md);
    height: 2px;
    background: currentColor;
}

.ce_banner__label > span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ce_banner__heading {
    letter-spacing: -.04em;
    white-space: pre-line;
}

.ce_banner__description {
    white-space: pre-line;
}

.ce_banner__action { align-self: flex-start; }
.ce_banner__action > span:first-child {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (min-width: 701px) {
    .ce_banner__panel { padding: var(--spacing-lg); }
}

@media (min-width: 1024px) {
    .ce_banner__panel { padding: calc(2 * var(--spacing-md)); }
    .ce_banner__layout {
        grid-template-columns: minmax(0, 600fr) minmax(0, 516fr);
        column-gap: clamp(var(--spacing-lg), 7vw, 100px);
    }
}

.ce_banner__layout--single { grid-template-columns: minmax(0, 1fr); }