.list-staggered-content-card {
    container: staggered / inline-size;
    display: flex;
    flex-direction: column;
    gap: 5.5rem;
}

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

.list-staggered-content-card__item {
    --_columns: "media media media media media media media gutter content content content content";
    --_grid: repeat(12, minmax(0, 1fr));
    --_media-offset: calc(var(--content-gutters) * -1);
    display: grid;
    grid-auto-flow: dense;
    gap: 1.5rem;
    grid-template-columns: var(--_grid);
    grid-template-areas: var(--_columns);
}

    .list-staggered-content-card__item:nth-child(even) {
        --_columns: "content content content content gutter media media media media media media media";
    }

:where(.list-staggered-content-card__item:nth-child(odd) .list-staggered-content-card__item__media) {
    margin-inline-start: var(--_media-offset);
}

:where(.list-staggered-content-card__item:nth-child(even) .list-staggered-content-card__item__media) {
    margin-inline-end: var(--_media-offset);
}

.list-staggered-content-card__item__media {
    grid-column: media;
}

    .list-staggered-content-card__item__media img {
        object-fit: cover;
        display: block;
        aspect-ratio: var(--_aspect, 1064 / 564);
        max-width: none;
        width: 100%;
    }

.list-staggered-content-card__item__content {
    grid-column: content;
}

.list-staggered-content-card__item__title {
    line-height: 1;
}

.list-staggered-content-card__item__summary {
    line-height: 1.5;
}

@container staggered (47.5rem <= width < 70rem) {
    .list-staggered-content-card__item {
        --_grid: repeat(4, minmax(0, 1fr)) 2.5rem repeat(3, minmax(0, 1fr));
        --_columns: "media media media media gutter content content content";
    }

        .list-staggered-content-card__item:nth-child(even) {
            --_columns: "content content content gutter media media media media";
        }
}

@container staggered (width < 47.5rem) {
    .list-staggered-content-card__item {
        --_grid: minmax(0, 1fr);
        --_columns: "media" "content";
    }

        .list-staggered-content-card__item:nth-child(even) {
            --_columns: "media" "content";
        }

    .list-staggered-content-card__item__media {
        margin-inline: var(--_media-offset);
    }
}