﻿:where(.list-banner-content-card__item *) {
    margin-top: 0;
}

.list-banner-content-card {
    container: card / inline-size;
    margin-top: 0;
}

.list-banner-content-card__item {
    /* @link https://utopia.fyi/clamp/calculator?a=440,1600,40-70 */
    --_padding-block: clamp(2.5rem, 1.7888rem + 2.5862cqi, 4.375rem) 4.375rem;
    --_padding-inline: var(--content-gutters);
    --_mask-opacity: 0.5;
    background-color: var(--_bg-color, var(--color-black));
    color: var(--_fg-color, var(--color-white));
    padding-inline: var(--_padding-inline);
    padding-block: var(--_padding-block);
    position: relative;
    isolation: isolate;
    min-height: min(50rem, 70dvh);
    flex-grow: 1;
}

@media (width < 37.5rem) {
    .list-banner-content-card__item {
        min-height: 40dvh;
    }
}

.list-banner-content-card__item__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

    .list-banner-content-card__item__media::after {
        content: "";
        background: hsla(0,0%,0%, var(--_mask-opacity));
        position: absolute;
        inset: 0;
    }

:where(.list-banner-content-card.inline-cta) .list-banner-content-card__item__media::after {
    inset: 0 0 29%;
    background: linear-gradient(180deg, #010101 0%, rgba(255, 255, 255, 0) 100%);
}


.list-banner-content-card__item__media img,
.list-banner-content-card__item__media video {
    position: absolute;
    inset: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.list-banner-content-card__wrapper {
    margin-inline: auto;
    max-width: var(--content-width);
}

:where(.list-banner-content-card.inline-cta) .list-banner-content-card__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;
}

:where(.list-banner-content-card) .o-keyline {
    flex-basis: 100%;
    margin-block-end: 1.5rem;
}

:where(.list-banner-content-card.inline-cta) .o-keyline {
    margin-block: 0;
}

.list-banner-content-card__item__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex-grow: 1;
}

.list-content-card__item__summary {
    max-width: 43.75rem;
    line-height: 1.5;
}

:where(.list-banner-content-card:not(.inline-cta) .list-banner-content-card__item__cta:not(:first-child)) {
    margin-top: 1.25rem;
}
