<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; background-color: #f4f4f7; padding: 20px; }
    .gallery-container { max-width: 1200px; margin: 0 auto; }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); 
      gap: 16px; 
    }
    .gallery-item {
      overflow: hidden;
      border-radius: 8px;
      aspect-ratio: 1 / 1;
    }
    .gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    .gallery-item:hover img { transform: scale(1.05); }

    @media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } }
  </style>