[variant="grid-with-lightbox"][hidden] {
  display: none;
}

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

[variant="grid-with-lightbox"],
[variant="grid-with-lightbox"]::part(template) {
  --columns: 1;
  --max-cards: 10;
  --card-aspect-ratio: 16 / 9;
  --gap: 10px;
  --visible-rows: unset; /* enables the show more button */

  /* Ceiling the value: adding ~0.5 to emulate Math.ceil */
  --rows: var(
    --visible-rows,
    round(down, (var(--max-cards, 10) + var(--columns) - 1) / var(--columns))
  );

  /* Adding the show more button. Multiplying with 0px because we only want the height of the show more butto when --visible-rows is defined */
  --extra-height: calc(var(--visible-rows) * 0px + 3.2em);
}

@container (min-width: 510px) {
  [variant="grid-with-lightbox"],
  [variant="grid-with-lightbox"]::part(template) {
    --columns: 2;
  }
}
@container (min-width: 770px) {
  [variant="grid-with-lightbox"],
  [variant="grid-with-lightbox"]::part(template) {
    --columns: 3;
  }
}

@container (min-width: 1030px) {
  [variant="grid-with-lightbox"],
  [variant="grid-with-lightbox"]::part(template) {
    --columns: 4;
  }
}

[variant="grid-with-lightbox"]:not(:defined)::before,
[variant="grid-with-lightbox"]::part(template) {
  content: " ";

  display: block;
  width: 100%;

  /* Use visible-rows if set, otherwise use full rows */
  min-height: calc(
    ((100cqw - ((var(--columns) - 1) * var(--gap, 10px))) / var(--columns)) /
    (var(--card-aspect-ratio, 16 / 9)) *
    (var(--visible-rows, var(--rows))) +
    ((var(--visible-rows, var(--rows)) - 1) * var(--gap, 10px)) +
    var(--extra-height, 0px)
  );
}