/* Match the homepage's 1376px container and responsive side padding. */
body.staging-wide > :is(header, main, footer) {
  width: 100%;
  max-width: 1376px;
  margin-inline: auto;
  padding-inline: 48px;
}

@media (min-width: 1101px) {
  .staging-wide .hero {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 40px;
    padding-block: 32px 40px;
    text-align: left;
  }
  .staging-wide .hero > div:first-child {
    max-width: none;
    margin: 0;
  }
  .staging-wide .hero-demo {
    max-width: none;
    margin: 0 !important;
    min-width: 0;
  }
  .staging-wide .style-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 1100px) {
  body.staging-wide > :is(header, main, footer) { padding-inline: 32px; }
}
@media (max-width: 767px) {
  body.staging-wide > :is(header, main, footer) { padding-inline: 24px; }
}
@media (max-width: 480px) {
  body.staging-wide > :is(header, main, footer) { padding-inline: 20px; }
}