.topImages {
  position: relative;
}

.imageWrapper {
  max-width: var(--max-width-page);
  margin: 0 auto;
}

.image {
  height: 200px;
  max-height: 40dvh;
  width: 100%;
  border-radius: var(--Corner-radius-md);
}

.image.clickable {
  cursor: pointer;
}

.seeAllButton {
  position: absolute;
  bottom: var(--Spacing-x2);
  right: var(--Spacing-x4);
}

@media screen and (max-width: 767px) {
  .image:not(:first-child) {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .imageWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--Spacing-x1);
  }

  .imageWrapper > .image:first-child {
    grid-column: span 2;
    grid-row: span 2;
    height: 300px;
  }

  .imageWrapper > .image:only-child {
    grid-column: span 3;
  }

  .imageWrapper > .image:nth-child(2):nth-last-child(1) {
    grid-column: span 1;
    grid-row: span 2;
    height: 300px;
  }

  .imageWrapper > .image:nth-child(2):nth-last-child(2),
  .imageWrapper > .image:nth-child(3) {
    grid-column: span 1;
    grid-row: span 1;
    height: calc(150px - var(--Spacing-x-half));
    max-height: calc(20dvh - var(--Spacing-x-half));
  }
}

@media screen and (min-width: 1367px) {
  .imageWrapper > .image:first-child,
  .imageWrapper > .image:nth-child(2):nth-last-child(1) {
    height: 400px;
  }

  .imageWrapper > .image:nth-child(2):nth-last-child(2),
  .imageWrapper > .image:nth-child(3) {
    height: calc(200px - var(--Spacing-x-half));
  }
}
