.gallery-grid {
  columns: 3;
  column-gap: 1rem;
}
.gallery-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  transition: transform 0.7s var(--ease);
}
.gallery-item:hover img {
  transform: scale(1.08);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 42, 82, 0.55));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.gallery-item:hover::after {
  opacity: 1;
}
.gallery-cap {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.gallery-item:hover .gallery-cap {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 820px) {
  .gallery-grid {
    columns: 2;
  }
}
@media (max-width: 520px) {
  .gallery-grid {
    columns: 1;
  }
}