/* Enlarge the standalone screen previews by 15% (80% / 784px originally). */
.hero-stage .frame-hero,
.frame-prop,
.frame-insights{
  width:92%;
  max-width:901.6px;
}

#inside .row.preview-expanded>.frame-wrap{min-width:0}

@media(min-width:901px){
  /* Increase the screen's share from 7/12 to 8.05/12 of the available row. */
  #inside .row.preview-expanded{grid-template-columns:minmax(0,3.95fr) minmax(0,8.05fr)}
  /* The existing layout puts flipped-row copy first until 960px. */
  #inside .row.flip.preview-expanded{grid-template-columns:minmax(0,6.25fr) minmax(0,5.75fr)}
}

@media(min-width:961px){
  #inside .row.flip.preview-expanded{grid-template-columns:minmax(0,8.05fr) minmax(0,3.95fr)}
}

@media(max-width:900px){
  /* Use the outer gutters when stacked, keeping at least 12px at each edge. */
  #inside .row.preview-expanded>.frame-wrap{
    width:min(115%,calc(100vw - 24px));
    justify-self:center;
  }
}