/* 縮小關於區照片，五種構圖共用既有文字與自然照片比例。 */
#about .about-visuals figure{width:82%;max-width:360px;margin:0 auto}
#about .about-visuals .about-installation-scene{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:transparent}
#about .about-visuals{min-height:0;height:auto;gap:28px}
#about .about-visuals figcaption{font-size:12px;line-height:1.8;margin-top:10px}
#about .about-layout-picker p{font-size:14px;line-height:1.7}
#about .about-layout-picker button{min-height:44px;font-size:14px;padding:9px 13px}
@media(min-width:761px){
  #about[data-layout="1"] .intro-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:48px;align-items:start}
  #about[data-layout="1"] .about-visuals{padding-top:8px;gap:36px}
  #about[data-layout="1"] .about-visuals figure{width:92%;max-width:340px}
  #about[data-layout="2"] .intro-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:48px}
  #about[data-layout="2"] .about-visuals figure{width:92%;max-width:340px}
  #about[data-layout="3"] .intro-grid{gap:36px 54px}
  #about[data-layout="3"] .about-visuals figure{width:82%;max-width:360px;align-self:center}
  #about[data-layout="4"] .intro-grid{gap:30px}
  #about[data-layout="4"] .about-visuals{max-width:800px;width:100%;margin:0 auto;gap:36px;align-items:start}
  #about[data-layout="4"] .about-visuals figure{width:100%;max-width:320px}
  #about[data-layout="4"] .about-copy{gap:40px;padding-top:24px;border-top:1px solid var(--line)}
  #about[data-layout="5"] .intro-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:44px;align-items:center}
  #about[data-layout="5"] .about-copy{background:var(--tone-surface);padding:28px;border-radius:8px}
  #about[data-layout="5"] .about-visuals{padding-top:0;gap:32px}
  #about[data-layout="5"] .about-visuals figure{width:90%;max-width:300px}
  #about[data-layout="5"] .about-visuals figure:last-child{width:82%;align-self:flex-end;margin-right:0}
}
@media(max-width:760px){
  #about .about-visuals figure{width:90%;max-width:320px}
  #about .intro-grid{gap:26px}
  #about[data-layout="3"] .about-copy,#about[data-layout="3"] .about-visuals{display:contents}
  #about[data-layout="3"] .about-copy-block:first-child{grid-row:1}
  #about[data-layout="3"] .about-visuals figure:first-child{grid-row:2}
  #about[data-layout="3"] .about-copy-block:last-child{grid-row:3}
  #about[data-layout="3"] .about-visuals figure:last-child{grid-row:4}
  #about[data-layout="5"] .about-copy{background:var(--tone-surface)}
}