Cards

.card-list li {
container-type: inline-size;
}

@container (min-width: 350px) {
.card {
--img-ratio: 1;
grid-auto-flow: column;
align-items: center;
}
}

@container (min-width: 600px) {
.card {
--img-ratio: 2/1;
grid-template-areas: "card";
place-items: center;
padding: 0;
overflow: hidden;
}

.card > * {
grid-area: card;
}

.card__content {
text-align: center;
color: #fff;
font-size: 2rem;
padding: 1rem;
}
}