* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        background: #f5f5f5;
        padding: 30px;
      }

      h1 {
        text-align: center;
        margin-bottom: 30px;
      }

      .filter-buttons {
        text-align: center;
        margin-bottom: 30px;
      }

      .filter-btn {
        padding: 8px 15px;
        margin: 5px;
        border: none;
        border-radius: 20px;
        background: #ddd;
        cursor: pointer;
        transition: 0.3s;
      }

      .filter-btn.active {
        background: #333;
        color: white;
      }

      .gallery-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
      }

      .gallery-item {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      }

      .gallery-item img {
        width: 100%;
        height: 260px;
        object-fit: cover;
      }

      .gallery-info {
        padding: 10px;
      }

      .hidden {
        display: none;
      }

      @media (max-width: 600px) {
        .gallery-container {
          grid-template-columns: 1fr;
        }
      }

      /* Skeleton Loader */
      .skeleton {
        background: linear-gradient(90deg, #eee 25%, #ddd 37%, #eee 63%);
        background-size: 400% 100%;
        animation: shimmer 1.4s ease infinite;
        height: 260px;
      }

      @keyframes shimmer {
        0% {
          background-position: -400px 0;
        }
        100% {
          background-position: 400px 0;
        }
      }