:where(.list-tiles-stories-feature *) {
    margin-top: 0;
}

.list-tiles-stories-feature {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "item1 item2" "item1 item3";
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
}

@media (width < 47.5rem) {
    .list-tiles-stories-feature {
        display: flex;
        flex-direction: column;
    }

    .list-tiles-stories-feature__item {
        --_aspect-ratio: 670/400;
    }
}

.list-tiles-stories-feature__item {
    container: tiles / inline-size;
    aspect-ratio: var(--_aspect-ratio, auto);
    background-color: var(--color-black);
    color: var(--color-white);
    position: relative;
    isolation: isolate;
    max-width: 100%;
}

    .list-tiles-stories-feature__item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(179.97deg, #010101 0.03%, rgba(255, 255, 255, 0) 99.97%);
        z-index: -1;
    }

@media (width >= 47.5rem) {
    .list-tiles-stories-feature__item:first-child {
        --_aspect-ratio: 670/642;
        grid-area: item1;
        min-height: 100%;
        max-width: 100%;
    }
}

.list-tiles-stories-feature__content {
    padding-inline: clamp(1.25rem, -1.1413rem + 8.6957cqi, 2.5rem);
    padding-block: 1.25rem;
}

.list-tiles-stories-feature__media {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;

    & img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transform: scale(var(--_media-scale, 1));
        transition: transform 1s var(--easing-snappy);
    }
}

.list-tiles-stories-feature__item:has(a):hover {
    --_media-scale: 1.05;
}

/* @link https://utopia.fyi/clamp/calculator?a=440,670,24-32 */
.list-tiles-stories-feature__title {
    font-size: clamp(1.5rem, 0.5435rem + 3.4783cqi, 2rem);
    line-height: 1.125;
}

.list-tiles-stories-feature__cta::before {
    content: "";
    position: absolute;
    inset: 0;
}