/* carousel.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── Carousel ── */
.Carousel_carousel {
  width:100%;
  position:relative;
  overflow:visible;
  box-sizing:border-box;
  padding:0 34px;
}

.Carousel_carouselCondensed {
  padding:0;
  height:100%;
  overflow:hidden;
}

.Carousel_arrowLeft,
.Carousel_arrowRight {
  display:block;
  cursor:pointer;
  position:absolute;
  border:none;
  background:transparent;
  top:calc(50% - 50px);
  width:50px;
  height:50px;
}

.Carousel_carouselCondensed .Carousel_arrowLeft,
.Carousel_carouselCondensed .Carousel_arrowRight {
  background:#f9e9b2;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  height:35px;
  width:35px;
  top:calc(50% - 17px);
}

.Carousel_carouselCondensed .Carousel_arrowLeft img,
.Carousel_carouselCondensed .Carousel_arrowRight img {
  height:11px;
  width:7px;
}

.Carousel_arrowLeft {
  left:0;
  transform:translateX(-13px) rotate(180deg);
}

.Carousel_arrowRight {
  right:0;
  transform:translateX(13px);
}

.Carousel_carouselLight .Carousel_arrowLeft,
.Carousel_carouselLight .Carousel_arrowRight {
  filter:invert(1) contrast(2);
}

.Carousel_carouselCondensed .Carousel_arrowLeft {
  transform:rotate(180deg);
  left:6px;
  z-index:1;
}

.Carousel_carouselCondensed .Carousel_arrowRight {
  transform:translateX(0);
  right:6px;
  z-index:1;
}

.Carousel_itemsContainer {
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  position:relative;
  margin-bottom:50px;
  width:100%;
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.Carousel_itemsContainer::-webkit-scrollbar {
  display:none;
}

.Carousel_carouselCondensed .Carousel_itemsContainer {
  height:100%;
  margin-bottom:0;
}

.Carousel_items {
  overflow:visible;
  display:flex;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  transition:all 1.5s cubic-bezier(.4,0,.2,1);
}

.Carousel_item {
  scroll-snap-align:start;
}

.Carousel_stepIndicator {
  display:flex;
  justify-content:center;
}

.Carousel_carouselCondensed .Carousel_stepIndicator {
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
}

@media (min-width:960px) {
  .Carousel_arrowLeft {
    transform:translateX(-26px) rotate(180deg);
  }
}

@media (min-width:960px) {
  .Carousel_arrowRight {
    transform:translateX(26px);
  }
}