.festive-container {
    display: flex;
    height: 112px;
    margin-top: -15px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.patriotic-bunting {
    --bunting-red: #b31942;
    --bunting-white: #f7f3e8;
    --bunting-blue: #173f7a;
    --bunting-rope: #a59681;
    --bunting-shadow: rgba(8, 26, 33, .18);
    --bunting-outline: rgba(8, 26, 33, .16);
    align-items: start;
    display: flex;
    gap: clamp(.15rem, .45vw, .55rem);
    justify-content: center;
    min-height: 108px;
    overflow: visible;
    padding: 0 clamp(.35rem, 2vw, 1.5rem);
    position: relative;
    width: 100%;
}

    /* Hanging rope */
    .patriotic-bunting::before {
        background: linear-gradient( 90deg, color-mix(in srgb, var(--bunting-rope) 72%, white), var(--bunting-rope) 18%, var(--bunting-rope) 82%, color-mix(in srgb, var(--bunting-rope) 72%, white) );
        border-radius: 999px;
        box-shadow: 0 1px 2px rgba(8, 26, 33, .12);
        content: "";
        height: 6px;
        left: 0;
        position: absolute;
        right: 0;
        top: 11px;
        z-index: 4;
    }

    /* Small top seam under the rope */
    .patriotic-bunting::after {
        background: repeating-linear-gradient( 90deg, rgba(8, 26, 33, .14) 0 1px, rgba(255, 255, 255, .18) 1px 3px, transparent 3px 14px );
        content: "";
        height: 6px;
        left: clamp(.35rem, 2vw, 1.5rem);
        position: absolute;
        right: clamp(.35rem, 2vw, 1.5rem);
        top: 11px;
        z-index: 3;
    }

.bunting-swag {
    animation: bunting-breathe 7s ease-in-out infinite;
    display: block;
    flex: 0 0 clamp(8.75rem, 11vw, 13.75rem);
    height: 96px;
    max-width: 13.75rem;
    min-width: 8.75rem;
    position: relative;
    transform-origin: 50% 0;
}

    /*
    Main fan shape.
    The layered radial gradients create the red outer fan,
    white middle band, and blue center.
*/
    .bunting-swag::before {
        background: radial-gradient( ellipse at 50% 0, var(--bunting-blue) 0 17%, transparent 17.5% ), radial-gradient( ellipse at 50% 0, var(--bunting-white) 0 42%, transparent 42.5% ), radial-gradient( ellipse at 50% 0, var(--bunting-red) 0 100% );
        border: 1px solid var(--bunting-outline);
        box-shadow: 0 4px 8px var(--bunting-shadow), inset 0 -8px 12px rgba(8, 26, 33, .09);
        clip-path: ellipse(49% 72% at 50% 0);
        content: "";
        inset: 14px .1rem 0;
        position: absolute;
        z-index: 1;
    }

    /*
    Pleats / folds.
    This gives the scallop a gathered fan-bunting feel
    without needing extra markup.
*/
    .bunting-swag::after {
        background: repeating-conic-gradient( from -90deg at 50% 0, rgba(255, 255, 255, .28) 0deg, rgba(255, 255, 255, .28) 2.25deg, rgba(8, 26, 33, .08) 2.25deg, rgba(8, 26, 33, .08) 4.75deg );
        clip-path: ellipse(49% 73% at 50% 0);
        content: "";
        inset: 14px .1rem 0;
        opacity: .55;
        position: absolute;
        z-index: 2;
    }

    .bunting-swag:nth-child(2n) {
        animation-delay: -1.5s;
    }

    .bunting-swag:nth-child(3n) {
        animation-delay: -2.75s;
    }

    .bunting-swag:nth-child(4n) {
        animation-delay: -4s;
    }

/*
    America 250 medallion.
    Styled like a small gold medal instead of another patriotic rosette.
*/
.bunting-medallion {
    align-items: center;
    background: radial-gradient( circle at 32% 28%, rgba(255, 255, 255, .95) 0 8%, transparent 9% ), radial-gradient( circle at 50% 45%, #fff8c9 0 22%, #f6de7d 23% 48%, #d8af46 49% 72%, #9f7420 73% 100% );
    border: 2px solid #fff4bf;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(8, 26, 33, .24), inset 0 2px 3px rgba(255, 255, 255, .65), inset 0 -4px 6px rgba(122, 82, 16, .22);
    color: #5c4313;
    display: inline-flex;
    font-family: Marcellus, serif;
    font-size: clamp(.82rem, 1.2vw, 1rem);
    font-weight: 700;
    height: clamp(2.25rem, 4.5vw, 2.9rem);
    justify-content: center;
    left: 50%;
    letter-spacing: .02em;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
    top: clamp(30px, 4vw, 34px);
    transform: translateX(-50%);
    width: clamp(2.25rem, 4.5vw, 2.9rem);
    z-index: 6;
}

    .bunting-medallion::before {
        border: 1px solid rgba(92, 67, 19, .28);
        border-radius: 50%;
        content: "";
        inset: .28rem;
        position: absolute;
    }

    .bunting-medallion::after {
        background: linear-gradient( 90deg, var(--bunting-red) 0 33%, var(--bunting-white) 33% 66%, var(--bunting-blue) 66% 100% );
        box-shadow: 0 2px 4px rgba(8, 26, 33, .18);
        content: "";
        height: clamp(1.05rem, 2vw, 1.45rem);
        left: 50%;
        position: absolute;
        top: calc(clamp(30px, 4vw, 34px) * -0.03 - 1.1rem);
        transform: translateX(-50%);
        width: clamp(.95rem, 1.8vw, 1.15rem);
        z-index: -1;
    }

@keyframes bunting-breathe {
    0%, 100% {
        transform: rotate(-.45deg) translateY(0);
    }

    50% {
        transform: rotate(.45deg) translateY(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bunting-swag {
        animation: none;
    }
}

/* Keep it calmer and legible in night mode */
body.night-mode .patriotic-bunting {
    --bunting-red: #cb4657;
    --bunting-white: #ebeef0;
    --bunting-blue: #496fb0;
    --bunting-rope: #a6947d;
    --bunting-shadow: rgba(0, 0, 0, .28);
    --bunting-outline: rgba(255, 255, 255, .14);
}

/* Slightly reduce the height on narrow screens */
@media (max-width: 575.98px) {
    .festive-container {
        height: 96px;
    }

    .patriotic-bunting {
        grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
        min-height: 94px;
    }

    .bunting-swag {
        height: 84px;
    }

    .bunting-medallion {
        font-size: .85rem;
        height: 2.45rem;
        top: 32px;
        width: 2.45rem;
    }
}

@media (min-width: 1800px) {
    .bunting-swag {
        flex-basis: 13.25rem;
    }
}

@media (min-width: 2400px) {
    .bunting-swag {
        flex-basis: 13.75rem;
    }
}