.sketch-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
    max-width: 1000px; 
    margin: 0 auto;
    overflow: visible; 
  }
  
  .sketch-item {
    position: relative;
    width: 220px;
    height: 300px; 
    margin: -15px; 
    cursor: default;
    z-index: 1;
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  
  .sketch-item:not(.in-view) {
    opacity: 0;
    pointer-events: none;
    
    transform: translateY(80px) scale(0.9) rotate(0deg) !important; 
  }
  
  
  .sketch-item.in-view {
    opacity: 1;
    pointer-events: auto;
    
  }
  
  
  .sketch-item:nth-child(1) { transition-delay: 0ms; }
  .sketch-item:nth-child(2) { transition-delay: 100ms; }
  .sketch-item:nth-child(3) { transition-delay: 200ms; }
  .sketch-item:nth-child(4) { transition-delay: 300ms; }
  .sketch-item:nth-child(5) { transition-delay: 400ms; }
  .sketch-item:nth-child(6) { transition-delay: 500ms; }
  .sketch-item:nth-child(7) { transition-delay: 600ms; }
  .sketch-item:nth-child(8) { transition-delay: 700ms; }
  .sketch-item:nth-child(n+9) { transition-delay: 800ms; }
  
  
  .sketch-inner {
    background: #fff;
    padding: 12px 12px 40px 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: inherit; 
    position: relative;
    overflow: hidden;
  }
  
  .sketch-inner {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  :root[data-theme="light"] .sketch-inner {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .sketch-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(0.9); 
    transition: filter 0.5s ease;
    display: block;
  }
  
  
  .sketch-caption {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink);
    opacity: 0.6;
  }
  
  
  .sketch-item:nth-child(odd) { transform: rotate(-3deg) translateY(5px); }
  .sketch-item:nth-child(even) { transform: rotate(2deg) translateY(-5px); }
  .sketch-item:nth-child(3n) { transform: rotate(4deg); }
  .sketch-item:nth-child(4n) { transform: rotate(-5deg); }
  .sketch-item:nth-child(5n) { transform: rotate(1deg); }
  
  
  .sketch-item:hover {
    z-index: 100;
    
    transform: scale(1.15) rotate(0deg) !important; 
  }
  
  .sketch-item:hover .sketch-inner {
    box-shadow: 0 30px 60px -10px rgba(0,0,0,0.5); 
  }
  
  .sketch-item:hover img {
    filter: grayscale(0%) contrast(1); 
  }
  
  /* =========================================
     MOBILE (iPhone) - MINI SCATTER PILE
     ========================================= */
  @media (max-width: 768px) {
    
    .sketch-gallery {
      padding: 2rem 0;
    }
  
    .sketch-item {
      
      width: 120px;
      height: 170px;
      margin: -8px; 
      
      transition-delay: 0s !important; 
      transition-duration: 0.4s;
    }
    
    
    .sketch-item:not(.in-view) {
      transform: translateY(30px) scale(0.9) rotate(0deg) !important;
    }
  
    .sketch-inner {
      padding: 5px 5px 20px 5px; 
    }
    
    .sketch-caption {
      font-size: 0.6rem;
      bottom: 4px;
    }
  
    
    .sketch-item:active {
      z-index: 100;
      transform: scale(1.3) rotate(0deg) !important;
    }
    
    .sketch-item:active .sketch-inner {
      box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    }
  
    .sketch-item:active img {
      filter: grayscale(0%) contrast(1);
    }
  }