[variant="carousel-lightbox"][hidden] {
  display: none;
}
[variant="carousel-lightbox"] {
  container-type: inline-size;
  width: 100%;
  display: block;
}

[variant="carousel-lightbox"],
[variant="carousel-lightbox"]::part(template) {
  --cards: 1;
  --card-aspect-ratio: 16 / 9;
  --max-cards: 10;
  /* this can be set to "auto" if you want to set a fixed height from the outside */
  --column-width: initial;
}

[variant="carousel-lightbox"]:not(:defined)::before,
[variant="carousel-lightbox"]::part(template) {
  content: " ";
  display: block;
  width: 100%;
  min-height: calc(
    (
      var(
        --column-width,
        (((100cqw - ((var(--cards) - 1) * var(--gap, 10px))) / var(--cards, 1)))
      )
    ) /
    (var(--card-aspect-ratio, (16 / 9)))
  );
}