.page-intro { padding-block: 3rem; }
.page-intro h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.contents { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 2rem; padding-left: 1.5rem; font-size: 0.875rem; }
.design-reader { width: min(100rem, calc(100% - 3rem)); margin-inline: auto; }
.design-page { padding-block: 2rem; }
.design-frame { display: block; width: 100%; height: 1000px; border: 0; background: var(--gid-background); color-scheme: dark; }
.design-page > a { display: inline-block; margin-top: 0.75rem; font-size: 0.8125rem; }
.prototype-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; padding-bottom: 3rem; }
.prototype-frame { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--gid-control-border); background: white; color-scheme: light; }
.prototype-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-block: 1rem; }
.prototype-pad .button { min-width: 0; }
.prototype-input > .button { width: 100%; }
.prototype-controls p { margin-top: 1rem; }
@media (max-width: 44rem) {
  .contents, .prototype-layout { grid-template-columns: minmax(0, 1fr); }
  .prototype-layout { gap: 2rem; }
}
@media (max-width: 24rem) {
  .design-reader { width: calc(100% - 2rem); }
}