.block-hero-slider {
  position: relative;
  margin: 0;
  container-type: inline-size;
  --hero-u: calc(100cqw / 1440);
  --hero-height: clamp(44rem, calc(1034 * var(--hero-u)), 64.625rem);
  --hero-slant: calc(202 * var(--hero-u));
  --hero-dots-offset: clamp(2.5rem, calc(90 * var(--hero-u)), 5.625rem);
}
.block-hero-slider .wp-block-cb-carousel-v2 {
  margin: 0 0 calc(18 * var(--hero-u));
}
.block-hero-slider .wp-block-cb-carousel-v2 .swiper,
.block-hero-slider .wp-block-cb-carousel-v2[data-cb-pagination] .swiper {
  margin: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--hero-slant)));
}
.block-hero-slider .cb-slide {
  display: flex;
  height: auto;
}
.block-hero-slider .cb-slide > * {
  flex: 1;
  min-height: var(--hero-height);
  margin: 0;
}
.block-hero-slider .cb-slide > .wp-block-cover.wp-block-cover > .wp-block-cover__inner-container {
  margin-bottom: var(--hero-slant);
}
.block-hero-slider .wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal {
  right: 0;
  bottom: calc(var(--hero-slant) + var(--hero-dots-offset));
  left: 0;
  display: flex;
  box-sizing: border-box;
  width: min(100%, var(--wp--custom--container--canvas));
  margin-inline: auto;
  padding-inline: var(--wp--custom--container--gutter);
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}
.block-hero-slider .wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal .cb-pagination-bullet {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  border-radius: 1rem;
  background: var(--wp--preset--color--white);
  opacity: 1;
  transition: width 300ms ease, opacity 300ms ease;
}
.block-hero-slider .wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal .cb-pagination-bullet.swiper-pagination-bullet-active {
  width: 4rem;
  opacity: 0.7;
}
.block-hero-slider .wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal .cb-pagination-bullet:focus-visible {
  outline: 2px solid var(--wp--preset--color--white);
  outline-offset: 0.25rem;
}
.block-hero-slider__line {
  position: absolute;
  bottom: calc(2 * var(--hero-u));
  left: 0;
  width: 100%;
  height: calc(218 * var(--hero-u));
  overflow: visible;
  pointer-events: none;
}
.block-hero-slider__line path {
  fill: none;
  stroke-width: clamp(2px, 5 * var(--hero-u), 5px);
}
.block-hero-slider.has-line-animation .block-hero-slider__line {
  clip-path: inset(-1rem calc((1 - var(--hero-line-progress, 1)) * 100%) -1rem -1rem);
}

@media (prefers-reduced-motion: reduce) {
  .block-hero-slider .cb-pagination-bullet {
    transition: none;
  }
}