@layer components {
  .zone-gallery {
    display: flex;
    gap: 1.1rem;
    padding-block-end: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--lava) transparent
  }

  .zone-gallery__item {
    flex: 0 0 min(19rem, 82vw);
    scroll-snap-align: start;
    border: 1px solid var(--ceniza);
    border-radius: var(--radius-lg);
    background-color: var(--grafito);
    overflow: hidden
  }

  .zone-gallery__media {
    aspect-ratio: 4 / 3;
    overflow: hidden
  }

  .zone-gallery__media img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .zone-gallery__body {
    padding: 1.1rem
  }

  .zone-gallery__body h3 {
    margin-block-end: 0.4rem;
    font-size: 1.05rem
  }

  .zone-gallery__body p {
    font-size: 0.88rem
  }
}