.gallery { background: var(--color-bg-sub); }
.gallery-content { display: grid; gap: var(--space-4); }
.gallery-section { display: grid; gap: var(--space-2); min-width: 0; }
.gallery-grid { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.gallery-controls { background: var(--color-surface); }
.gallery-intro { display: grid; gap: var(--space-2); }
.prototype-banner { padding: var(--space-2); border: 1px solid var(--color-brand-800); border-radius: var(--radius-control); background: var(--color-brand-50); }
.sample-action-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sample-action-row > .button { flex: 1 1 auto; }
.sample-photo { display: grid; border-radius: var(--radius-card); overflow: hidden; }
.sample-photo img { display: block; width: 100%; height: auto; grid-area: 1 / 1; align-self: start; }
.sample-photo__band { grid-area: 1 / 1; align-self: end; background: rgba(255,255,255,.9); color: var(--color-brand-800); padding: var(--space-2); font-size: var(--fs-section-title); font-weight: 700; line-height: 1.5; }
.sample-logo { width: 96px; height: 96px; }
.sample-icon { width: 96px; height: 96px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.contrast-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contrast-item { padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.contrast-item p { overflow-wrap: anywhere; }
.contrast-item__ratio { color: var(--color-brand-800); font-weight: 700; }
.gallery-tap-result { font-weight: 700; }
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  html[data-font-scale="130"] .gallery-grid--three { grid-template-columns: minmax(0, 1fr); }
}