/* The gallery (/gallery/): page designs in phone frames, each scrolling inside. Loaded from that page only. */
.gl-g { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.gl-i { display: flex; justify-content: center; }
.gl-ph { position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 19; padding: 8px; border-radius: 40px; background: #1a1a1a; box-shadow: inset 0 0 0 1px var(--line-2); }
.gl-sc { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: auto; border-radius: 32px; background: #fff; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gl-sc::-webkit-scrollbar { display: none; }
.gl-sc img { display: block; width: 100%; height: auto; }
.gl-ph:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
@media (max-width: 639.98px) {
  .gl-g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gl-ph { padding: 6px; border-radius: 28px; }
  .gl-sc { border-radius: 22px; }
}