/* Opt-in composition for a feature illustration beside copy.
   Load after home-production-flow.css. The compact design remains shared. */
@container (min-width:580px) {
 .home-production-flow[data-production-layout=split] {
  & .gsp-still { aspect-ratio:720/440; }
  & .gsp-still .gsp-workspace { width:720px; height:440px; transform:scale(calc(100cqw / 720px)); }
  & .gsp-playback { margin-right:28px; }

  & :is(.gsp [data-layout=wide], .gsp-still) {
   & .gsp-connections-wide { display:block; }
   & .gsp-connections-compact { display:none; }
   & .gsp-template { left:36px; top:124px; width:188px; height:auto; padding:16px; }
   & .gsp-template > .gsp-eyebrow { display:none; }
   & .gsp-template-title { margin-top:0; font-size:14px; line-height:20px; }
   & .gsp-template-settings { display:block; margin-top:16px; }
   & .gsp-setting + .gsp-setting { margin-top:12px; }
   & .gsp-light-setting { display:flex; font-size:12px; }
   & :is(.gsp-material-setting,.gsp-camera-setting) > .gsp-setting-label { display:none; }
   & .gsp-select { padding:0 7px; gap:5px; margin-top:0; }
   & .gsp-select > svg:first-child { display:block; }
   & .gsp-select select { font-size:12px; }
   & .gsp-finishes, & .gsp-fallback-finishes { gap:9px; margin-top:0; }
   & .gsp-finishes button, & .gsp-fallback-finishes label { gap:7px; padding:4px; font-size:12px; }
   & .gsp-column-headings { display:block; left:36px; right:auto; top:96px; width:188px; }
   & .gsp-column-headings > :nth-child(n + 2) { display:none; }

   & .gsp-output-matrix { left:286px; right:36px; top:44px; bottom:auto; grid-template-rows:repeat(3,110px); gap:14px; }
   & .gsp-product-column { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:22px 80px; gap:8px; padding:0; }
   & .gsp-product-tab { display:flex; grid-column:1 / -1; grid-row:1; justify-self:start; width:auto; min-height:22px; gap:6px; padding:0; font-size:12px; line-height:18px; }
   & .gsp-product-tab svg { width:18px; height:18px; }
   & .gsp-extension { display:inline; }
   & .gsp-image-well { height:100%; aspect-ratio:auto; }
   & .gsp-image-well[data-view=full] .gsp-image { object-fit:contain; }
   & .gsp-image-caption { display:none; }
   & .gsp-model-detail, & .gsp-product-column::after { display:none; }
   & .gsp-product-column > .gsp-image-well[data-view=full] { grid-column:1; grid-row:2; }
   & .gsp-product-column > .gsp-image-well[data-view=alternate] { grid-column:2; grid-row:2; }
   & .gsp-product-column > .gsp-image-well[data-view=detail] { grid-column:3; grid-row:2; }
  }
 }
}

@supports not (transform:scale(calc(100cqw / 720px))) {
 @container (min-width:580px) {
  .home-production-flow[data-production-layout=split] .gsp-still .gsp-workspace { transform:scale(tan(atan2(100cqw,720px))); }
 }
}