.gallery {
  display: grid;
  gap: 0.25rem;
  overflow: hidden;
  border-radius: 0.5rem;
  height: 100%;
  aspect-ratio: 3 / 2;
}

.gallery:has(a:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));

  .gallery__item {
    &:first-child {
      grid-column: span 1 / span 1;
      grid-row: span 1 / span 1;
    }
  }
}

.gallery:has(a:nth-child(3):last-child) {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));

  .gallery__item {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;

    &:first-child {
      grid-column: span 4 / span 4;
      grid-row: span 6 / span 6;
    }
  }
}

.gallery:has(a:nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));

  .gallery__item {
    &:first-child {
      grid-column: span 3 / span 3;
      grid-row: span 3 / span 3;
    }
  }
}

.gallery__item {
  grid-column: span 1 / span 2;
  grid-row: span 1 / span 2;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}