.imageWrapper {
  display: grid;
  gap: 8px;
  position: relative;
  width: 100%;
  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
  z-index: 0;
}

.image {
  object-fit: cover;
  border-radius: var(--Corner-radius-Medium);
  width: 100%;
  height: 100%;
  max-height: 30vh;
}

.imageWrapper > :nth-child(2),
.imageWrapper > :nth-child(3) {
  display: none;
}

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

@media screen and (min-width: 1367px) {
  .imageWrapper {
    grid-template-columns: 70% 30%;
    grid-template-rows: repeat(2, 16.625rem);
    grid-template-areas:
      "main side1"
      "main side2";
    padding: var(--Spacing-x2) var(--Spacing-x5) 0;
  }

  .image {
    max-height: none;
  }

  .imageWrapper > :first-child {
    grid-area: main;
  }

  .imageWrapper > :nth-child(2),
  .imageWrapper > :nth-child(3) {
    display: initial;
  }

  .imageWrapper > :nth-child(2) {
    grid-area: side1;
  }

  .desktopGrid > :nth-child(3) {
    grid-area: side2;
  }

  .seeAllButton {
    right: var(--Spacing-x7);
  }
}
