:root {
  --mk-color-accent: #b8914a;
  --mk-color-background: #faf6f1;
  --mk-color-dark: #1b1315;
  --mk-color-primary: #7a1218;
  --mk-color-text: #2a2022;
  --mk-radius: 0;
}
.mk-carousel { --mk-carousel-gap: 1.5rem; --mk-carousel-per-view: 3; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--mk-carousel-per-view) - 1) * var(--mk-carousel-gap)) / var(--mk-carousel-per-view)); gap: var(--mk-carousel-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
@media (max-width: 60rem) { .mk-carousel { --mk-carousel-per-view: 2; } }
@media (max-width: 40rem) { .mk-carousel { --mk-carousel-per-view: 1.15; } }
@media (prefers-reduced-motion: no-preference) { .mk-carousel { scroll-behavior: smooth; } }
.mk-carousel > * { scroll-snap-align: start; min-width: 0; }
:where(.mk-carousel-controls) { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
:where(.mk-carousel-controls[hidden]) { display: none; }
:where(.mk-carousel-prev, .mk-carousel-next) { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
:where(.mk-carousel-prev, .mk-carousel-next):disabled { opacity: 0.35; cursor: default; }
:where(.mk-carousel-dots) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
:where(.mk-carousel-dot) { width: 0.65rem; height: 0.65rem; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; }
:where(.mk-carousel-dot[aria-current="true"]) { background: currentColor; }