/* ============================================
   PAGE: Fun Gallery
   ============================================ */
/* FSD: pages/fun-gallery → Fun gallery page layout */
/* PURPOSE: Layout for fun/personal projects gallery */
/* DEPENDENCIES: shared/gallery-item.css for card component */
/* REUSED: .gallery-item component from shared/gallery-item.css */
/* SCALED FOR: Vertical scroll gallery with consistent spacing */

/* ANCHOR: FUN_GALLERY_PAGE */

/* ============================================
   FUN GALLERY CONTAINER
   ============================================ */

/* CRITICAL: Fun gallery layout */
.fun-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px; /* Large gap for visual separation */
  padding: 120px 60px 200px 60px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}

.fun-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.2s ease-out;
}

.fun-gallery-item:hover,
.fun-gallery-item--hovered {
  opacity: 0.85;
}

.fun-gallery-item-image {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.fun-gallery-item-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* MOBILE: Smaller padding and gap */
@media (max-width: 768px) {
  .fun-gallery {
    gap: 60px; /* Reduced from 100px */
    padding: 100px 16px 200px 16px;
  }
}