.gallery {
  --grid-max-col-count: 4;
  --grid-min-col-size: 160px;
  --grid-gap: clamp(var(--space-3), 4vw ,var(--space-4));

  /* calculations, do not touch */
  --grid-col-size-calc: calc(
    (100% - var(--grid-gap) * var(--grid-max-col-count)) /
      var(--grid-max-col-count)
  );
  --grid-col-min-size-calc: min(
    100%,
    max(var(--grid-min-col-size), var(--grid-col-size-calc))
  );

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min-size-calc), 1fr));  
  gap: var(--grid-gap);
}

.gallery-item {
  display: block;
  border-radius: 1rem;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 180ms ease;
}

@media (hover: hover) {
  .gallery-item:hover img {
    transform: scale(1.04);
  }
}