.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;
}

.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 */
    container: card / inline-size;
    background-color: var(--_bg-color, var(--color-black));
    color: var(--_fg-color, var(--color-white));
    aspect-ratio: 112 / 107;
    position: relative;
    isolation: isolate;
    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));
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

: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 {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    
    & img {
        position: absolute;
        inset: 0;
        object-fit: cover;
        height: 100%;
        width: 100%;
        transform: scale(var(--_media-scale, 1));
        transition: transform 1s var(--easing-snappy);
    }
}

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

/* @link https://utopia.fyi/clamp/calculator?a=300,672,26—44 */
.list-content-card__item__title {
    font-size: clamp(1.625rem, 0.7177rem + 4.8387cqi, 2.75rem);
}

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