.layout-tiles .layout__region--tiles {
  display: grid;
  gap: var(--grid-gap-large);
  grid-template-columns: repeat(1, 100%);
}

@media screen and (min-width: 600px) {
  .layout-tiles--2-in-row .layout__region--tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .layout-tiles--3-in-row .layout__region--tiles {
    grid-template-columns: repeat(3, 1fr);
  }
  .layout-tiles--4-in-row .layout__region--tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .layout-tiles--2-in-row .layout__region--tiles {
    padding-inline: 20%; /* This ensures that 2x2 tiles are not too big on large screens */
  }
}

@media screen and (min-width: 960px) {
  .layout-tiles--4-in-row .layout__region--tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}