/* Design hub (views/site/pages/design.php), on top of css/site/ai.css */
.design-shot { margin-top: 48px; }
.design-shot img, .design-pair img { display: block; width: 100%; height: auto; }

.design-looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.design-looks figure { margin: 0; display: grid; gap: 10px; }
.design-looks img { display: block; width: 100%; height: auto; border-radius: var(--r-lg, 14px); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.design-looks figcaption { font-weight: 600; }
.design-more { margin-top: 20px; max-width: 68ch; }

.design-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.design-pair figure { margin: 0; display: grid; gap: 14px; align-content: start; }
.design-pair figcaption { color: var(--ink-muted); }
.design-pair figcaption b { color: var(--ink); }
.design-custom { margin-top: 32px; }

@media (max-width: 900px) {
    .design-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .design-pair { grid-template-columns: 1fr; }
}