Media

Gallery

Use .quanta-gallery to lay out images in a responsive grid. It auto‑fills the width with items of at least 180px.

<div class="quanta-gallery">
  <div class="quanta-gallery-item">
    <img src="https://picsum.photos/300?random=1" alt="Random image" />
  </div>
  <!-- repeat for each image -->
</div>

Items & Hover

Each .quanta-gallery-item maintains a square aspect ratio, rounded corners via var(--quanta-rounded-md), and zooms the image slightly on hover/focus.

.quanta-gallery-item {
  aspect-ratio: 1/1;
  border-radius: var(--quanta-rounded-md);
  overflow: hidden;
}
.quanta-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.quanta-gallery-item:hover img,
.quanta-gallery-item:focus-visible img {
  transform: scale(1.05);
}

Lightbox

Wrap a full‑screen overlay in .quanta-lightbox. Toggle the .active class to show or hide the enlarged image.

<div class="quanta-lightbox">
  <span class="quanta-lightbox-close">×</span>
  <img src="https://picsum.photos/800/600?random=8" alt="Enlarged view" />
</div>

Click on the image to open Lightbox