.image-grid {
  display: grid;
  grid-template-columns: repeat(6, 7.4rem);
  grid-template-rows: repeat(8, 3.8rem);
  grid-gap: 1rem;

  .image-grid__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  .image-grid__img--0 {
    grid-column: 1 / 4;
    grid-row: 1 / 5;
  }

  .image-grid__img--1 {
    grid-column: 2 / 4;
    grid-row: 5 / 9;
  }

  .image-grid__img--2 {
    grid-column: 4 / 7;
    grid-row: 2 / 8;
  }
}

/* TABLET */
@media only screen and (max-width: 1024px) {
  .image-grid {
    display: grid;
    grid-template-columns: repeat(6, 5.6rem);
    grid-template-rows: repeat(8, 3rem);
    grid-gap: 1rem;
  }
}

/* MOBILE */
@media only screen and (max-width: 768px) {
  .image-grid {
    display: grid;
    grid-template-columns: repeat(6, 4rem);
    grid-template-rows: repeat(8, 2rem);
    grid-gap: 1rem;
  }
}