/* eating-tips-carousel.css */
.view-id-eating_tips {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  --slide-spacing : 1rem;
}

.embla__viewport {
  overflow: hidden;
  width: 100%;
}

.embla__container {
  display: flex;
  gap: 24px;


  /* What is this? */
  touch-action: pan-y pinch-zoom;
  -webkit-touch-callout: none;
  -webkit-user-select: none;


  /* margin-left: calc(var(--slide-spacing, 1rem) * -1); */
}

.embla__slide {
  flex: 0 0 auto;
  min-width: 0;
  padding-left: var(--slide-spacing, 1rem);
  position: relative;
}

/* Responsive slide widths
.embla__slide {
  flex: 0 0 100%; /* Default: 1 slide per view /
}

@media (min-width: 768px) {
  .embla__slide {
    flex: 0 0 50%; /* 2 slides per view on tablets /
  }
}

@media (min-width: 1024px) {
  .embla__slide {
    flex: 0 0 33.333%; /* 3 slides per view on desktop /
  }
}
*/

/* Navigation buttons */
.embla__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.embla__button:hover {
  background: rgba(255, 255, 255, 1);
}

.embla__button--prev {
  left: 10px;
}

.embla__button--next {
  /*left: calc(100vw - 700px);*/
  left: 80px;
}

/* Dot indicators */
.embla__dots {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
  gap: 0.5rem;
}

.embla__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.embla__dot--selected {
  background: #333;
}