@charset "UTF-8";

/* =========================
   Gallery
========================= */
.gallery {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 88px;
  row-gap: 120px;
}

/* =========================
   Item
========================= */
.gallery-item img {
  width: 90%;
  aspect-ratio: 1 / 0.7;
  object-fit: cover;
  display: flex;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.gallery-item img:hover {
  opacity: 0.88;
  transform: scale(1.01);
}

/* =========================
   Caption
========================= */

/* =========================
   Mobile
========================= */

@media (max-width: 768px) {

  .gallery {

    grid-template-columns:
      1fr 1fr;

    column-gap: 16px;
    row-gap: 48px;
  }

}