/* goasto.com/sites/ only: the few rules product.css doesn't have. */
/* hero: the real editor behind, the published site on a phone in front */
.st-hero-art { height: 620px; }
.st-art-desk { position: absolute; left: -40px; top: 96px; width: 480px; z-index: 1; transform: rotate(-2deg); transform-origin: 70% 30%; opacity: .96; }
.st-hero-art .st-art-phone { right: 0; top: 0; width: 260px; }
.st-hero-art .st-art-phone img { background: #FBF6EE; }

/* the chat and the domain screens carry small type: a wider column than a phone gets */
.pd-feature.st-card-feature { grid-template-columns: minmax(0, 1fr) 380px; }
.pd-feature.st-card-feature.pd-flip { grid-template-columns: 380px minmax(0, 1fr); }
.pd-close .pd-caption { max-width: 62ch; margin-top: 32px; }

@media (max-width: 1100px) {
  .st-art-desk { width: 420px; }
  .st-hero-art .st-art-phone { width: 230px; }
  .pd-feature.st-card-feature { grid-template-columns: minmax(0, 1fr) 330px; }
  .pd-feature.st-card-feature.pd-flip { grid-template-columns: 330px minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .st-hero-art { height: 580px; max-width: 560px; }
  .st-art-desk { left: 0; width: 420px; }
  .pd-feature.st-card-feature, .pd-feature.st-card-feature.pd-flip { grid-template-columns: 1fr; }
  .st-card-feature > .pd-card { width: min(420px, 100%); margin: 0 auto; }
}
@media (max-width: 640px) {
  .st-hero-art { height: auto; max-height: none; display: flex; flex-direction: column; align-items: center; }
  .st-art-desk { position: relative; left: auto; top: auto; width: 100%; transform: none; opacity: 1; }
  .st-hero-art .st-art-phone { position: relative; right: auto; top: auto; margin-top: -56px; width: min(230px, 60vw); }
}