/*
 * Card carousels (.embla--bleed): property, post and location lists and related properties.
 * Slides are sized from the content column, --embla-per-view slides per row (+ the 2rem gap).
 * While looping (.embla--loop, set by initEmblaCarousel) the track spans the whole section,
 * so the side margins always show the neighbouring slides.
 * Without container query units the slides keep their basis-* classes and the carousel its column.
 */
@supports (width: 1cqw) {
  .embla--bleed {
    container-type: inline-size;
    --embla-per-view: 1;
  }

  .embla--bleed .embla__slide {
    flex-basis: calc((100cqw + 2rem) / var(--embla-per-view));
  }

  .embla--bleed.embla--loop .embla__container {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  @media (min-width: 640px) {
    .embla--bleed {
      --embla-per-view: 2;
    }
  }

  @media (min-width: 768px) {
    .embla--bleed.embla--4-up {
      --embla-per-view: 3;
    }
  }

  @media (min-width: 1024px) {
    .embla--bleed {
      --embla-per-view: 3;
    }

    .embla--bleed.embla--4-up {
      --embla-per-view: 4;
    }
  }
}