#root .wheychef-recipes-carousel .marquee {
  display: grid;
  gap: 0.8rem;
  overflow: hidden;
  padding-block: 0.25rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}

#root .wheychef-recipes-carousel .wheychef-recipes-row {
  --recipe-gap: 0.8rem;
  display: flex;
  width: max-content;
  gap: var(--recipe-gap);
  will-change: transform;
}

#root .wheychef-recipes-carousel .wheychef-recipes-row--right {
  animation: wheychef-recipes-right 34s linear infinite;
}

#root .wheychef-recipes-carousel .wheychef-recipes-row--left {
  animation: wheychef-recipes-left 38s linear infinite;
}

#root .wheychef-recipes-carousel .wheychef-recipes-row img {
  width: clamp(185px, 18vw, 225px) !important;
  max-width: none !important;
  flex: 0 0 auto;
}

@keyframes wheychef-recipes-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - (var(--recipe-gap) / 2)));
  }
}

@keyframes wheychef-recipes-right {
  from {
    transform: translateX(calc(-50% - (var(--recipe-gap) / 2)));
  }
  to {
    transform: translateX(0);
  }
}

@media (max-width: 639px) {
  #root .wheychef-recipes-carousel .marquee {
    gap: 0.65rem;
    margin-inline: -1rem;
  }

  #root .wheychef-recipes-carousel .wheychef-recipes-row {
    --recipe-gap: 0.65rem;
  }

  #root .wheychef-recipes-carousel .wheychef-recipes-row img {
    width: min(54vw, 205px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root .wheychef-recipes-carousel .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #root .wheychef-recipes-carousel .wheychef-recipes-row {
    animation: none !important;
    transform: none !important;
  }
}