.carousel {
  max-width: 100%;
  overflow-x: scroll;
  display: flex;
  gap: 12px;
  padding-left: max((100% - 800px) / 2, 16px);
  padding-right: max((100% - 800px) / 2, 16px);
}
.carousel .carousel-item {
  width: auto;
  height: 320px;
  max-height: 80svh;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-medium);
}
@container document-body style(--config-corner-squircle: true) {
  @supports (corner-shape: squircle) {
    .carousel .carousel-item {
      corner-shape: squircle;
      --radius-tiny: 10px;
      --radius-small: 20px;
      --radius-medium: 30px;
      --radius-large: 40px;
      --radius-full: 999px;
    }
    .carousel .carousel-item * {
      --radius-tiny: 4px;
      --radius-small: 8px;
      --radius-medium: 12px;
      --radius-large: 16px;
      --radius-full: 999px;
    }
  }
}
.carousel > figure {
  margin: 0;
  padding: 0 !important;
}