.case-screenshots { scroll-margin-top: 280px; }
.case-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.case-gallery-grid figure { margin: 0; min-width: 0; }
.case-gallery-image { display: block; position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #f4f7fc; }
.case-gallery-image img { display: block; width: 100%; height: auto; }
.case-gallery-image:focus-visible { outline: 3px solid #e91e89; outline-offset: 4px; }
.case-gallery-image:hover img { filter: brightness(.97); }
.case-gallery-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; background: #14161b; color: #fff; border-radius: 4px; font-size: 26px; }
.case-gallery-grid figcaption { margin-top: 14px; }
.case-gallery-grid h3 { margin: 0 0 7px; font-size: 22px; }
.case-gallery-grid figcaption p { margin: 0; color: var(--muted); }
.case-gallery-dialog { box-sizing: border-box; width: min(1440px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 12px; border: 1px solid #555; border-radius: 6px; background: #17191e; color: #fff; }
.case-gallery-dialog::backdrop { background: rgba(0, 0, 0, .88); }
.case-gallery-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.case-gallery-title { flex: 1; margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.case-gallery-dialog button { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid #666; border-radius: 4px; background: #252830; color: #fff; font: 26px/1 system-ui, sans-serif; cursor: pointer; }
.case-gallery-dialog button:focus-visible { outline: 3px solid #cfff2f; outline-offset: 2px; }
.case-gallery-dialog img { display: block; width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; }
.case-gallery-open { overflow: hidden; }
@media (max-width: 800px) { .case-gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .case-gallery-grid h3 { font-size: 20px; } .case-gallery-title { font-size: 16px; } }
@media (max-width: 800px) { .case-screenshots { scroll-margin-top: 190px; } }