/* ============================================
   FACE PAINTING MAGIC GALLERY (BENTO BOX LAYOUT)
   ============================================ */

#facepainting-gallery {
  padding: 5rem 0;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0fdfa 100%);
  position: relative;
  overflow: hidden;
}

#facepainting-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 240px !important;
  gap: 1.5rem !important;
  padding: 2rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.facepainting-item {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: #0f172a; /* very dark slate background makes colors pop */
  cursor: pointer;
  border: 4px solid transparent;
}

.facepainting-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease !important;
  opacity: 0.85;
  max-width: none !important;
  margin: 0 !important;
}

.facepainting-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.facepainting-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(14, 165, 233, 0.25);
  border-color: rgba(56, 189, 248, 0.8);
  z-index: 10;
}

.facepainting-item:hover img {
  transform: scale(1.12) !important;
  opacity: 1;
}

.facepainting-item:hover::after {
  opacity: 1;
}

/* Bento Box Asymmetry Magic */
.facepainting-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.facepainting-item:nth-child(4) { grid-row: span 2; }
.facepainting-item:nth-child(5) { grid-column: span 2; }
.facepainting-item:nth-child(8) { grid-column: span 2; grid-row: span 2; }
.facepainting-item:nth-child(9) { grid-column: span 2; }

@media (max-width: 900px) {
  #facepainting-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 200px !important;
  }
  .facepainting-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .facepainting-item:nth-child(4) { grid-row: span 1; grid-column: span 1; }
  .facepainting-item:nth-child(5) { grid-column: span 2; }
  .facepainting-item:nth-child(8) { grid-column: span 2; grid-row: span 1; }
  .facepainting-item:nth-child(9) { grid-column: span 2; }
}

@media (max-width: 600px) {
  #facepainting-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 250px !important;
  }
  .facepainting-item:nth-child(n) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}