collection

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Responsive Section with Links</title>
  <style>
    .gallery {
      display: grid;
      grid-template-columns: repeat(3, minmax(280px, 1fr));
      gap: 20px;
      padding: 20px;
    }

    .gallery-item {
      position: relative;
      overflow: hidden;
    }

    .gallery-item img {
      width: 100%;
      height: auto;
      display: block;
    }

    .caption1 {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(to right, #c9c693 50%, #ffffff 50%);
      background-size: 200% 100%;
      background-position: left;
      color: #ffffff;
      padding: 10px 18px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
      pointer-events: none;
      border: 1px solid #c9c693;
      transition: background-position 0.4s ease, color 0.4s ease;
    }

    .gallery-item:hover .caption1 {
      background-position: right;
      color: #c9c693;
    }

    .gallery-item a {
      display: block;
      position: relative;
      text-decoration: none;
    }

    @media (max-width: 1024px) {
      .gallery {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
      }
    }

    @media (max-width: 600px) {
      .gallery {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <div class="gallery">
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/dreamy-dunes">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/Dreamy_dunes.png?v=1749901468" alt="New In">
        <div class="caption1">DREAMY DUNES</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/sunlit-grove">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/SUNLIT_GROVE.png?v=1749901468" alt="Serveware">
        <div class="caption1">SUNLIT GROVE</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/rustic-roots">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/RUSTIC_ROOTS.png?v=1749901468" alt="Kitchen Accessories">
        <div class="caption1">RUSTIC ROOTS</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/bliss-blossom">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/BLISS_BLOSSOM.png?v=1749901468" alt="New In">
        <div class="caption1">BLISS & BLOSSOM</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/opal-aura">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/OPAL_AURA.png?v=1749901468" alt="Serveware">
        <div class="caption1">OPAL AURA</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/window-pane">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/WINDOW_PANE.png?v=1749901468" alt="Kitchen Accessories">
        <div class="caption1">WINDOW PANE</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/flawless-maze">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/FLAWLESS_MAZE.png?v=1749901468" alt="Kitchen Accessories">
        <div class="caption1">FLAWLESS MAZE</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/drift">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/DRIFT.png?v=1749901468" alt="New In">
        <div class="caption1">DRIFT</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/blue-horizon">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/BLUE_HORIZON.png?v=1749901468" alt="Serveware">
        <div class="caption1">BLUE HORIZON</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/rose-roots">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/ROSE_ROOTS.png?v=1749901468" alt="Kitchen Accessories">
        <div class="caption1">ROSE & ROOTS</div>
      </a>
    </div>
    <div class="gallery-item">
      <a href="https://blockunblock.in/collections/boxed-bliss">
        <img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/BOXED_BLISS.png?v=1749901468" alt="Kitchen Accessories">
        <div class="caption1">BOXED BLISS</div>
      </a>
    </div>
  </div>
</body>

</html>