:root {
  --media-row-col1: calc((100% - (2 * var(--gutter))) / 3);
}

.media-row {
  display: grid;
  gap: var(--gutter);
}

/* 3 equal */
.media-row-block.style-three-equal .media-row {
  grid-template-columns: repeat(3, 1fr);
}

/* 1/3–2/3, aligned with 3-col first column and same 16px gap */
.media-row-block.style-one-third-two-thirds .media-row {
  grid-template-columns: var(--media-row-col1) calc(100% - var(--gutter) - var(--media-row-col1));
}

/* Two equal columns with 16px gap (no special alignment) */
.media-row-block.style-two-equal .media-row {
  grid-template-columns: repeat(2, 1fr);
}


.media-row .row {
  border-radius: var(--border-radius);
  aspect-ratio: 600 / 700;
  overflow: hidden;
}
.media-row figure {
  height: 100%;
}
.media-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.media-row .row.video-row {
    position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* hides parts of video that overflow */
}
.media-row .row.video-row video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes it act like background-size: cover */
}

@media all and (max-width: 700px) {
.media-row-block.style-three-equal .media-row {
  grid-template-columns: 1fr 1fr;
}
.media-row-block.style-three-equal .media-row > .single-image:nth-child(3) {
  grid-column: 1 / -1;
}
}
@media all and (max-width: 480px) {
.media-row-block.style-two-equal .media-row {
  grid-template-columns: 1fr;
}
.media-row-block.style-three-equal .media-row {
  grid-template-columns: 1fr;
}
.media-row-block.style-three-equal .media-row > .single-image:nth-child(3) {
  grid-column: initial;
}
.media-row-block.style-one-third-two-thirds .media-row {
  grid-template-columns: 1fr;
}
}