Css grid, column size defined by row height

<media-section>
  <image-row>
    <card>
      <img>
    </card>
  </image-row>
</media-section>

/* Base layout */
.image-row {
  display: grid;
  gap: 16px; /* tweak as needed */
}

/* Ensure images fill their boxes nicely */
.image {
  width: 100%;
  overflow: hidden;
}
.image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 2 cards: 50% each, 16:9 ---------- */
/* Exactly 2 cards = has 2nd child but no 3rd */
.image-row:has(> .image-card:nth-child(2)):not(:has(> .image-card:nth-child(3))) {
  grid-template-columns: repeat(2, 1fr);
}
.image-row:has(> .image-card:nth-child(2)):not(:has(> .image-card:nth-child(3)))
  .image {
  aspect-ratio: 16 / 9;
}

/* ---------- 3 cards: alternate featured 16:9, others 1:1 ---------- */
/* Exactly 3 cards = has 3rd child but no 4th */
.image-row:has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4))) {
  grid-template-columns: repeat(3, 1fr);
}

/* Default all 1:1 on 3-card rows */
.image-row:has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
  .image {
  aspect-ratio: 1 / 1;
}

/* Odd 3-card rows: first card is 16:9 */
.media-container
  > .image-row:nth-child(odd):has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
  > .image-card:first-child
  .image {
  aspect-ratio: 16 / 9;
}

/* Even 3-card rows: last card is 16:9 */
.media-container
  > .image-row:nth-child(even):has(> .image-card:nth-child(3)):not(:has(> .image-card:nth-child(4)))
  > .image-card:last-child
  .image {
  aspect-ratio: 16 / 9;
}

/* ---------- 4 cards: all 1:1 ---------- */
/* Exactly 4 cards = has 4th child */
.image-row:has(> .image-card:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}
.image-row:has(> .image-card:nth-child(4))
  .image {
  aspect-ratio: 1 / 1;
}