.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.gallery > .item {
  display: flex;
  animation: fadeIn 1s infinite alternate;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 0.75 / 1;
}

.gallery > .item > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background: none;
  transition: opacity 1s linear;
}

.gallery > .item > img.loading {
  opacity: 0;
}

body > img.medium-zoom-image {
  object-fit: contain;
}

@keyframes fadeIn {
  from { background: rgba(169, 169, 169, 0.2); }
  to { background: rgba(169, 169, 169, 0.6); }
}

.gallery .item.wide {
    aspect-ratio: 1 / 0.75;
}

@media screen and (min-width: 769px) {
  .gallery .item.tall {
    grid-row: span 2 / auto;
  }

  .gallery .item.wide {
    grid-column: span 2 / auto;
  }
}