:root{
  --ms-gap:16px;
  --ms-card-w: clamp(300px, 46vw, 560px);
  --ms-radius:16px;
  --ms-shadow:0 6px 18px rgba(0,0,0,.08);
  --ms-border:1px solid rgba(0,0,0,.08);
  --ms-accent:#0b77f5;
  --ms-mint:#42e3c2;
  --ms-pad:12px;
  --ms-media-center: 160px; /* JS updates to exact image center */
}
.ms-section{position:relative;padding:8px 0 24px;}
.ms-viewport{position:relative;padding:0 var(--ms-pad);}
.ms-track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--ms-card-w);gap:var(--ms-gap);
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;scroll-snap-stop:always;scroll-padding:var(--ms-pad);
  scrollbar-width:none;-ms-overflow-style:none}
.ms-track::-webkit-scrollbar{height:0;width:0;display:none}
.ms-track>*{scroll-snap-align:start}
.ms-card{display:flex;flex-direction:column;border:var(--ms-border);border-radius:var(--ms-radius);background:#fff;box-shadow:var(--ms-shadow);min-height:100%;position:relative}
.ms-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:var(--ms-border);background:#f6f7f8; min-height:300px;}
.ms-media img{width:100%;height:100%;object-fit:cover;display:block}
.ms-media-link{display:block;width:100%;height:100%}
.ms-body{display:flex;flex-direction:column;gap:10px;padding:14px}
.ms-name{font-weight:700;font-size:1.05rem;line-height:1.25;color:#111;margin:0}
.ms-desc{color:#555;font-size:.95rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ms-cta{display:flex;gap:10px;margin-top:auto}
.ms-cta a{appearance:none;border-radius:999px;padding:10px 14px;font-weight:600;border:1px solid #ddd;background:#fff;cursor:pointer;text-decoration:none;line-height:1}
.ms-cta a.primary{background:var(--ms-accent);color:#fff;border-color:var(--ms-accent)}
/* Arrows: mint circles, always visible, centered to image */
.ms-nav{position:absolute;left:0;right:0;top:calc(var(--ms-media-center) - 22px);height:44px;pointer-events:none}
.ms-btn{width:44px;height:44px;border-radius:999px;background:var(--ms-mint);border:none;box-shadow:var(--ms-shadow);
  display:flex;align-items:center;justify-content:center;pointer-events:auto}
.ms-btn svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;display:block}
.ms-prev{position:absolute;left:var(--ms-pad);transform:translate(-50%,-50%)}
.ms-next{position:absolute;right:var(--ms-pad);transform:translate(50%,-50%)}
/* Single item: center and hide nav */
.ms-section.ms-single .ms-viewport{padding:0}
.ms-section.ms-single .ms-track{grid-auto-columns:minmax(300px,640px);justify-content:center;overflow-x:visible;scroll-snap-type:none}
.ms-section.ms-single .ms-nav{display:none}
@media(max-width:860px){
  :root{--ms-gap:12px}
  .ms-viewport{padding:0 var(--ms-pad)}
  .ms-track{grid-auto-columns:minmax(calc(100% - (var(--ms-pad)*2)),1fr)}
}
@media(max-width:560px){
  .ms-viewport{padding:0 10px}
  .ms-btn{width:40px;height:40px}
}