@layer components {
  .c-composition-gallery { --stack-gap: var(--space-4); min-inline-size: 0; }
  .c-composition-gallery__items { --grid-gap: var(--space-5); --grid-min: calc(var(--space-10) * 2); --reel-gap: var(--space-5); align-items: start; }
  .c-composition-gallery__items > figure { margin: 0; min-inline-size: 0; }
  .c-composition-gallery__items > figure[hidden], .c-composition-gallery__controls[hidden] { display: none; }
  .c-composition-gallery__items img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--wa-radius-panel); }
  .c-composition-gallery__items img[role="button"] { cursor: zoom-in; }
  .c-composition-gallery--alternating .c-composition-gallery__items > figure:nth-child(5n + 1) { grid-column: 1 / -1; }
  .c-composition-gallery--alternating .c-composition-gallery__items > figure:nth-child(5n + 1) img { aspect-ratio: 16 / 9; }
  .c-composition-gallery--featured .c-composition-gallery__items > figure:first-child { grid-column: 1 / -1; }
  .c-composition-gallery--featured .c-composition-gallery__items > figure:first-child img { aspect-ratio: 16 / 9; }
  .c-composition-gallery--carousel .c-composition-gallery__items > figure { flex-basis: min(85%, var(--measure)); }
  .c-composition-gallery--carousel .c-composition-gallery__items > figure:only-child { flex-basis: 100%; }
  .c-composition-gallery__controls { --cluster-justify: flex-end; --cluster-gap: var(--space-3); }
}
@layer components {
    .c-composition-gallery-viewer {
        --modal-max: calc(100% - var(--space-6));
        max-block-size: calc(100% - var(--space-6));
        padding: 0;
        overflow: auto;
    }
    .c-composition-gallery-viewer::backdrop {
        background: var(--wa-color-media-scrim);
    }
    .c-composition-gallery-viewer__body {
        --stack-gap: var(--space-3);
        margin: 0;
    }
    .c-composition-gallery-viewer__image {
        inline-size: 100%;
        block-size: 65dvh;
        object-fit: contain;
    }
}

@layer components {
  .c-composition-gallery--mosaic .c-composition-gallery__items { --grid-gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .c-composition-gallery--mosaic .c-composition-gallery__items > figure { justify-content: stretch; }
  .c-composition-gallery--mosaic .c-composition-gallery__items img { flex: 1 1 auto; min-block-size: 0; object-fit: cover; }
  @media (min-width: 48rem) {
    .c-composition-gallery--mosaic .c-composition-gallery__items { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
    .c-composition-gallery--mosaic .c-composition-gallery__items:has(> figure:nth-child(3):not([hidden])) > figure:first-child { grid-row: span 2; }
    .c-composition-gallery--mosaic .c-composition-gallery__items:not(:has(> figure:nth-child(2):not([hidden]))) > figure:first-child { grid-column: 1 / -1; }
  }
}