@layer components {

  .media-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
    margin: 0;
  }

  .media-gallery__hero {
    inline-size: 100%;
    aspect-ratio: var(--ratio-landscape);
    overflow: hidden;
    border-radius: var(--radius-l);
    background: var(--surface-sunken);
  }

  .media-gallery__hero-link {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    cursor: zoom-in;
  }

  .media-gallery__hero-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-l);
  }

  .media-gallery__hero-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .media-gallery__hero-link:hover .media-gallery__hero-image {
    transform: scale(1.02);
  }

  .media-gallery__thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: var(--grid-gap);
  }

  .media-gallery__thumb-item {
    display: flex;
    min-inline-size: 0;
  }

  .media-gallery__thumb {
    flex: 1;
    inline-size: 100%;
    aspect-ratio: var(--ratio-square);
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-m);
    background: var(--surface-sunken);
    cursor: pointer;
    overflow: hidden;
    transition:
      border-color var(--duration-fast) var(--ease-default),
      transform var(--duration-fast) var(--ease-default);
  }

  .media-gallery__thumb:hover {
    transform: translateY(var(--hover-lift));
  }

  .media-gallery__thumb.is-active {
    border-color: var(--primary);
  }

  .media-gallery__thumb:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .media-gallery__thumb-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .media-gallery__caption {
    margin: 0;
    font-size: var(--text-s);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    text-align: center;
  }


  /* MOBILE — thumbnail rail becomes horizontal CSS scroll so thumbs stay
     legible (a 6-thumb grid would crush them under 320px). */
  @media (max-width: 48em) {
    .media-gallery__thumbs {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline proximity;
      scrollbar-width: none;
      -ms-overflow-style: none;

      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
      scroll-padding-inline: var(--gutter);
    }

    .media-gallery__thumbs::-webkit-scrollbar {
      display: none;
    }

    .media-gallery__thumb-item {
      flex: 0 0 5rem;
      scroll-snap-align: start;
    }
  }

}