@media (max-width: 768px) {

  nav {
    padding: 10px 16px;
    gap: 8px;
  }

  .nav-logo img {
    height: 26px;
  }

  .hero-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-align: center;
  }

  .nav-back {
    font-size: 10px;
    letter-spacing: 0.1em;
    gap: 4px;
    white-space: nowrap;
  }

  
  .gallery-header {
    padding: 76px 20px 24px;
    gap: 8px;
  }

  .gallery-header h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .gallery-header p {
    font-size: 0.85rem;
    max-width: 100%;
  }


  .grid-section {
    padding: 24px 12px 48px;
  }

  .grid-label {
    font-size: 0.65rem;
    margin-bottom: 16px;
  }

  .masonry {
    columns: 2;
    column-gap: 8px;
  }

  .masonry-item {
    margin-bottom: 8px;
  }


  .masonry-item:hover img {
    transform: scale(1.08);
  }

.footer {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 4px;
    text-align: center;
  }
 .footer-text {
    font-size: 8px;
}
.footer-logo img { 
    height: 20px; 
    opacity: 0.8; 
}
}