.gallery-minimal {
      container-type: inline-size;
      container-name: gallery-minimal;
    }

    .gallery-minimal__header {
      text-align: center;
      margin-bottom: var(--space-4xl);
    }

    .gallery-minimal__title {
      font-size: var(--text-3xl);
      font-weight: 400;
      color: var(--text-title);
      margin-top: var(--space-m);
      margin-bottom: 0;
    }

    .gallery-minimal__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-xs);
    }

    .gallery-minimal__item {
      position: relative;
      display: block;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      overflow: hidden;
      aspect-ratio: 4/3;
    }

    .gallery-minimal__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .gallery-minimal__item:hover .gallery-minimal__image {
      transform: scale(1.08);
    }

    .gallery-minimal__overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: oklch(0 0 0 / 0);
      transition: background 0.3s ease;
    }

    .gallery-minimal__overlay .lucide {
      width: 2.8rem;
      height: 2.8rem;
      color: var(--text-light);
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .gallery-minimal__item:hover .gallery-minimal__overlay {
      background: oklch(0 0 0 / 0.35);
    }

    .gallery-minimal__item:hover .gallery-minimal__overlay .lucide {
      opacity: 1;
      transform: scale(1);
    }

    /* Lightbox Modal */
    .gallery-minimal__modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .gallery-minimal__modal.is-active {
      opacity: 1;
      visibility: visible;
    }

    .gallery-minimal__modal-backdrop {
      position: absolute;
      inset: 0;
      background: oklch(0 0 0 / 0.92);
      cursor: pointer;
    }

    .gallery-minimal__modal-content {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: var(--space-3xl);
    }

    .gallery-minimal__modal-close {
      position: absolute;
      top: var(--space-l);
      right: var(--space-l);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.4rem;
      height: 4.4rem;
      background: transparent;
      border: 1px solid oklch(1 0 0 / 0.2);
      border-radius: var(--radius-xs);
      cursor: pointer;
      transition: background 0.3s ease, border-color 0.3s ease;
      z-index: 10;
    }

    .gallery-minimal__modal-close:hover {
      background: oklch(1 0 0 / 0.1);
      border-color: oklch(1 0 0 / 0.4);
    }

    .gallery-minimal__modal-close .lucide {
      width: 2rem;
      height: 2rem;
      color: var(--text-light);
    }

    .gallery-minimal__modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5rem;
      height: 5rem;
      background: transparent;
      border: 1px solid oklch(1 0 0 / 0.2);
      border-radius: var(--radius-xs);
      cursor: pointer;
      transition: background 0.3s ease, border-color 0.3s ease;
      z-index: 10;
    }

    .gallery-minimal__modal-nav:hover {
      background: oklch(1 0 0 / 0.1);
      border-color: oklch(1 0 0 / 0.4);
    }

    .gallery-minimal__modal-nav--prev {
      left: var(--space-l);
    }

    .gallery-minimal__modal-nav--next {
      right: var(--space-l);
    }

    .gallery-minimal__modal-nav .lucide {
      width: 2.4rem;
      height: 2.4rem;
      color: var(--text-light);
    }

    .gallery-minimal__modal-image-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: calc(100% - 14rem);
      max-height: calc(100% - 8rem);
    }

    .gallery-minimal__modal-image {
      max-width: 100%;
      max-height: 85vh;
      object-fit: contain;
      transform: scale(0.96);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .gallery-minimal__modal.is-active .gallery-minimal__modal-image {
      transform: scale(1);
      opacity: 1;
    }

    .gallery-minimal__modal-counter {
      position: absolute;
      bottom: var(--space-l);
      left: 50%;
      transform: translateX(-50%);
      font-size: var(--text-s);
      font-weight: 500;
      color: oklch(1 0 0 / 0.5);
      letter-spacing: 0.1em;
    }

    /* Tablet Large - 3 columns */
    @container gallery-minimal (max-width: 968px) {
      .gallery-minimal__grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* Tablet - 2 columns */
    @container gallery-minimal (max-width: 768px) {
      .gallery-minimal__header {
        margin-bottom: var(--space-3xl);
      }

      .gallery-minimal__title {
        font-size: var(--text-2xl);
      }

      .gallery-minimal__grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .gallery-minimal__modal-content {
        padding: var(--space-xl);
      }

      .gallery-minimal__modal-nav {
        width: 4rem;
        height: 4rem;
      }

      .gallery-minimal__modal-nav--prev {
        left: var(--space-s);
      }

      .gallery-minimal__modal-nav--next {
        right: var(--space-s);
      }

      .gallery-minimal__modal-image-wrap {
        max-width: calc(100% - 10rem);
      }
    }

    /* Mobile Large */
    @container gallery-minimal (max-width: 640px) {
      .gallery-minimal__modal-close {
        top: var(--space-s);
        right: var(--space-s);
        width: 3.6rem;
        height: 3.6rem;
      }

      .gallery-minimal__modal-image-wrap {
        max-width: calc(100% - 6rem);
      }
    }

    /* Mobile */
    @container gallery-minimal (max-width: 480px) {
      .gallery-minimal__grid {
        gap: var(--space-3xs);
      }

      .gallery-minimal__modal-nav {
        width: 3.2rem;
        height: 3.2rem;
      }

      .gallery-minimal__modal-nav .lucide {
        width: 1.8rem;
        height: 1.8rem;
      }
    }