:root {
  --section-space: 180px;
}

main > .hero {
  padding-bottom: 80px;
}

main > .workflow-showcase {
  margin-top: var(--section-space);
}

main > .section {
  padding-top: var(--section-space);
}

@media (min-width: 680px) {
  .agency-section > .agency-scene { grid-column: 1; grid-row: 1; }
  .agency-section > .agency-copy { grid-column: 2; grid-row: 1; }
  .lead-section > .lead-copy { grid-column: 1; grid-row: 1; }
  .lead-section > .lead-scene { grid-column: 2; grid-row: 1; }
  .import-section > .import-scene { grid-column: 1; grid-row: 1; }
  .import-section > .section-copy { grid-column: 2; grid-row: 1; }
}

main > .closing-final {
  padding-block: calc(var(--section-space) + 20px) calc(var(--section-space) + 30px);
}

@media (max-width: 1100px) {
  :root { --section-space: 140px; }
  main > .hero { padding-bottom: 72px; }
}

@media (max-width: 679px) {
  :root { --section-space: 104px; }
  main > .hero { padding-bottom: 60px; }
}