.dib-responsive-card-panels {
    width: 100%;
    min-width: 0;
    position: relative;
    isolation: isolate;
}

.dib-responsive-card-panels .dib-card-panels__header {
    text-align: center;
    padding: 0 0 28px;
}

.dib-responsive-card-panels .dib-card-panels__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
}

.dib-responsive-card-panels .dib-card-panels__eyebrow::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.dib-responsive-card-panels .dib-card-panels__heading {
    margin: 0;
    line-height: 1.1;
}

.dib-responsive-card-panels .dib-card-panels__header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #16181d;
    text-decoration: none;
    transition: gap var(--dib-transition, 500ms) var(--dib-easing, ease);
}

.dib-responsive-card-panels .dib-card-panels__header-link:hover {
    gap: 10px;
}

.dib-responsive-card-panels .dib-card-panels__track {
    --dib-card-height: 280px;
    --dib-gap: 6px;
    display: flex;
    gap: var(--dib-gap);
    width: 100%;
    min-width: 0;
    min-height: var(--dib-card-height);
    align-items: stretch;
    overflow: hidden;
}

.dib-responsive-card-panels .dib-card-panels__track--start { justify-content: flex-start; }
.dib-responsive-card-panels .dib-card-panels__track--center { justify-content: center; }

.dib-responsive-card-panels .dib-card-panels__card {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: var(--dib-card-height);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    transform: translateZ(0);
    transition:
        flex var(--dib-transition, 500ms) var(--dib-easing, ease),
        transform var(--dib-transition, 500ms) var(--dib-easing, ease),
        filter var(--dib-transition, 500ms) var(--dib-easing, ease);
    will-change: flex, transform;
}

.dib-responsive-card-panels .dib-card-panels__card.is-featured { flex-grow: 1.55; }

.dib-responsive-card-panels .dib-card-panels__media,
.dib-responsive-card-panels .dib-card-panels__scrim {
    position: absolute;
    inset: 0;
    display: block;
}

.dib-responsive-card-panels .dib-card-panels__media {
    z-index: -2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.001) translateZ(0);
    transition: transform var(--dib-transition, 500ms) var(--dib-easing, ease), filter var(--dib-transition, 500ms) var(--dib-easing, ease);
}

.dib-responsive-card-panels .dib-card-panels__scrim {
    z-index: -1;
    background: linear-gradient(to top, rgba(0, 0, 0, var(--dib-overlay, .28)) 0%, rgba(0, 0, 0, calc(var(--dib-overlay, .28) * .25)) 42%, rgba(0, 0, 0, 0) 72%);
}

.dib-responsive-card-panels .dib-card-panels__title {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 22px;
    width: calc(100% - 36px);
    transform: translateX(-50%);
    text-align: center;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .42);
    pointer-events: none;
}

.dib-responsive-card-panels .dib-card-panels__hover--expand .dib-card-panels__card:hover { flex-grow: var(--dib-hover-grow, 2.2); }

.dib-responsive-card-panels .dib-card-panels__hover--expand .dib-card-panels__track:has(.dib-card-panels__card:hover) .dib-card-panels__card:not(:hover) {
    filter: saturate(.82) brightness(.88);
}

.dib-responsive-card-panels .dib-card-panels__hover--expand .dib-card-panels__card:hover .dib-card-panels__media {
    transform: scale(1.04) translateZ(0);
}

.dib-responsive-card-panels .dib-card-panels__hover--scale .dib-card-panels__card:hover {
    transform: scale(var(--dib-hover-scale, 1.03));
    z-index: 4;
}

.dib-responsive-card-panels .dib-card-panels__hover--scale .dib-card-panels__card:hover .dib-card-panels__media {
    transform: scale(1.035) translateZ(0);
}

.dib-responsive-card-panels .dib-card-panels__hover--none .dib-card-panels__card,
.dib-responsive-card-panels .dib-card-panels__hover--none .dib-card-panels__media {
    transition: none;
}

@media (max-width: 1024px) {
    .dib-responsive-card-panels .dib-card-panels__track {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        overscroll-behavior-inline: contain;
        padding: 2px;
    }

    .dib-responsive-card-panels .dib-card-panels__card,
    .dib-responsive-card-panels .dib-card-panels__card.is-featured {
        flex: 0 0 min(42vw, 360px);
        scroll-snap-align: start;
    }

    .dib-responsive-card-panels .dib-card-panels__hover--expand .dib-card-panels__card:hover {
        flex-basis: min(48vw, 390px);
    }
}

@media (max-width: 767px) {
    .dib-responsive-card-panels .dib-card-panels__header { padding-bottom: 20px; }

    .dib-responsive-card-panels .dib-card-panels__track {
        gap: max(4px, var(--dib-gap));
        margin-inline: -2px;
    }

    .dib-responsive-card-panels .dib-card-panels__card,
    .dib-responsive-card-panels .dib-card-panels__card.is-featured,
    .dib-responsive-card-panels .dib-card-panels__hover--expand .dib-card-panels__card:hover {
        flex-basis: 72vw;
    }

    .dib-responsive-card-panels .dib-card-panels__card { height: min(var(--dib-card-height), 64vh); }

    .dib-responsive-card-panels .dib-card-panels__title {
        bottom: 18px;
        width: calc(100% - 28px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dib-responsive-card-panels .dib-card-panels__card,
    .dib-responsive-card-panels .dib-card-panels__media,
    .dib-responsive-card-panels .dib-card-panels__header-link {
        transition: none !important;
    }
}