.list-content-card {
    --_min-card-size: 18.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_min-card-size)), 1fr));
    gap: 1.5rem;
    grid-template-rows: auto auto 1fr auto;
}

    .list-content-card:where(.no-mask) {
        --_bg-color: var(--color-white);
        --_fg-color: var(--color-black);
        --_mask-visibility: hidden;
    }

.list-content-card__item {
    /* @link https://utopia.fyi/clamp/calculator?a=480,1368,20—40 */
    background-color: var(--_bg-color, var(--color-black));
    color: var(--_fg-color, var(--color-white));
    padding-inline: var(--_padding-inline, clamp(1.25rem, 0.5743rem + 2.2523vw, 2.5rem));
    padding-block: var(--_padding-block, clamp(1.25rem, 0.5743rem + 2.2523vw, 2.5rem));
    grid-row: span 4;
    grid-template-rows: subgrid;

    &::before {
        content: "";
        grid-column: 1;
        grid-row: 1 / -1;
        width: 100%;
        aspect-ratio: 676 / 640;
        pointer-events: none;
        min-inline-size: 0;
    }
}

:where(.list-content-card__item *) {
    margin-top: 0;
}

.list-content-card__item::after {
    content: "";
    background: linear-gradient(179.97deg, #010101 0.03%, rgba(255, 255, 255, 0) 99.97%);
    position: absolute;
    inset: 0 0 50% 0;
    pointer-events: none;
    z-index: -1;
    visibility: var(--_mask-visibility, visible);
}

.list-content-card__item__media {

    & img {
        transform: scale(var(--_media-scale, 1));
        transition: transform 1s var(--easing-snappy);
    }
}

.list-content-card__item:has(a):hover {
    --_media-scale: 1.05;
}

.list-content-card__item__cta::after {
    content: "";
    position: absolute;
    inset: 0;
}