.mq{--mq-h:clamp(220px,30vw,340px)}
.mq-vp{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;outline:none;padding:6px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.mq-vp::-webkit-scrollbar{display:none}
.mq-vp.drag{cursor:grabbing}
.mq-vp:focus-visible{box-shadow:0 0 0 2px var(--gold,#b8954a) inset}
.mq-track{display:flex;gap:14px;width:max-content;padding:0 14px}
.mq-it{margin:0;flex:0 0 auto;height:var(--mq-h);aspect-ratio:3/2;position:relative;border-radius:14px;overflow:hidden;background:#1d1a15;box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
.mq-it img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.mq-vp .mq-it:hover img{transform:scale(1.04)}
.mq-it figcaption{position:absolute;inset:auto 0 0 0;padding:28px 14px 10px;font-size:14px;line-height:1.35;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.62));pointer-events:none}
@media (max-width:760px){.mq{--mq-h:min(52vw,250px)}.mq-track{gap:10px;padding:0 10px}.mq-it{border-radius:10px}.mq-it figcaption{font-size:13px;padding:22px 10px 8px}}
@media (prefers-reduced-motion:reduce){.mq-it img{transition:none}}