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

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

[variant="player-with-playlist"]:not(:defined)::before,
[variant="player-with-playlist"]::part(template) {
  content: " ";
  display: block;
  width: 100%;
  /* player on top + spacer + playlist on bottom */
  min-height: calc(
    (
      100cqw /
      (var(--card-aspect-ratio, (16 / 9))) +
      (var(--container-gap, 10px)) +
      (
        var(
          --column-width,
          (
            (
              (100cqw - ((var(--cards) - 1) * var(--gap, 10px))) /
              var(--cards, 1)
            )
          )
        )
      ) /
      (var(--card-aspect-ratio, (16 / 9)))
    )
  );
}
@container (min-width: 481px) {
  [variant="player-with-playlist"],
  [variant="player-with-playlist"]::part(template) {
    --cards: 3;
  }
}