body {
  margin: 0;
}

.image-grid {
  --gap: 16px;
  --num-cols: 4;
  --row-height: 300px;


  box-sizing: border-box;
  padding: var(--gap);

  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}

.image-grid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-grid-col-2 {
  grid-column: span 2;
}

.image-grid-col-2 {
  grid-row: span 2;
}

@media screen and (max-width: 1024px) {
  .image-grid {
    --num-cols: 2;
    --row-height: 200px;
  }
}

.image-grid-2 {
  --gap: 16px;
  --num-cols: 4;
  --row-height: 300px;


  box-sizing: border-box;
  padding: var(--gap);

  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-auto-rows: var(--row-height);
  gap: var(--gap);
}

.image-grid-2 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-grid-col-2-2 {
  grid-column: span 2;
}

.image-grid-col-2-2 {
  grid-row: span 2;
}

@media screen and (max-width: 1024px) {
  .image-grid-2-2 {
    --num-cols: 2;
    --row-height: 200px;
  }
}