.food-carousel{--food-visible:3;--food-gap:14px;padding-inline:25px;position:relative}.food-carousel-viewport{gap:var(--food-gap);scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-block:2px 4px;display:flex;overflow-x:auto}.food-carousel-viewport::-webkit-scrollbar{display:none}.food-carousel>button{z-index:2;border:1px solid var(--color-line);background:var(--background);width:38px;height:38px;color:var(--color-ink);box-shadow:0 4px 12px color-mix(in srgb,var(--color-ink) 6%,transparent);border-radius:50%;place-items:center;transition:color .2s,opacity .2s,box-shadow .2s;display:grid;position:absolute;top:40%;transform:translateY(-50%)}.food-carousel>button:hover:not(:disabled){color:var(--color-brand);box-shadow:0 5px 15px color-mix(in srgb,var(--color-brand) 12%,transparent)}.food-carousel>button:disabled{opacity:.4;cursor:default}.food-carousel-prev{left:-12px}.food-carousel-next{right:-12px}@media (min-width:640px){.food-carousel{--food-visible:4}}@media (min-width:768px){.food-carousel{--food-visible:5}}@media (min-width:1024px){.food-carousel{--food-visible:6}}@media (min-width:1280px){.food-carousel{--food-visible:7}}@media (min-width:1536px){.food-carousel{--food-visible:8}}@media (max-width:639px){.food-carousel{--food-gap:10px;padding-inline:15px}.food-carousel>button{width:30px;height:30px}.food-carousel-prev{left:-10px}.food-carousel-next{right:-10px}}.food-carousel-viewport>*{flex:0 0 calc((100% - (var(--food-visible) - 1) * var(--food-gap)) / var(--food-visible));scroll-snap-align:start;min-width:0}