.image-grid {
  gap: var(--spacing-4);
}

.image-grid__item {
  grid-column: span 8;

  img {
    border-radius: 0.5rem;
  }
}

@media (min-width: 768px) {
  .image-grid__item--50_50,
  .image-grid__item--60,
  .image-grid__item--40 {
    grid-column: span 6 / -2;
  }
}

@media (min-width: 1440px) {
  .image-grid__item--50_50,
  .image-grid__item--60,
  .image-grid__item--40 {
    width: auto;
    grid-column: span 4;
  }
}

@media (min-width: 1920px) {
  /* (3/8) = 37.5% width */
  .image-grid__item--40 {
    grid-column: span 3;
  }

  /* (5/8) = 62.5% width */
  .image-grid__item--60 {
    grid-column: span 5;
  }
}