.case-gallery { margin: 28px 0 36px; }
.case-gallery--web { display: grid; gap: 32px; }
.case-shot { margin: 0; min-width: 0; }
.case-shot-frame { display: block; overflow: hidden; border: 1px solid var(--line, #dedede); border-radius: 14px; background: #f6f6f6; }
.case-shot-frame img { display: block; width: 100%; height: auto; }
.case-browser-bar { display: flex; gap: 5px; padding: 10px 12px; background: #ededed; border-bottom: 1px solid #ddd; }
.case-browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #bcbcbc; }
.case-shot figcaption { display: grid; gap: 5px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted, #737373); }
.case-shot figcaption strong { font-weight: 500; color: var(--ink, #202020); }
.case-shot figcaption a { width: fit-content; color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.case-gallery--phone { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 28px 16px; }
.case-gallery--phone .case-shot-frame { border: 6px solid #252525; border-radius: 30px; box-shadow: 0 8px 24px #00000012; }
.case-gallery--phone img { aspect-ratio: 390 / 844; object-fit: contain; }
.case-shot-frame:focus-visible { outline: 3px solid var(--ink, #202020); outline-offset: 4px; }
@media (max-width: 600px) {
  .case-gallery--phone { grid-template-columns:none;grid-auto-flow:column;grid-auto-columns: 76%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 14px; gap: 18px; }
  .case-gallery--phone .case-shot { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: no-preference) { .case-gallery--phone { scroll-behavior: smooth; } }