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

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

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

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

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

.image-row img {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  object-fit: cover;
}

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