/* Containers, section rhythm, and the two grids the site uses. */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

/* No rules between sections. Space separates them. */
.section { padding-block: var(--s-16); }

.section--tight { padding-block: var(--s-12); }
.section--hero  { padding-block: var(--s-12); }

/* A section heading sits above its content with a mono label over it. */
.section-head { margin-bottom: var(--s-8); }
.section-head .label { display: block; margin-bottom: var(--s-3); }

/* Text sections on wide screens: the label and heading on the left, the text
   on the right, so a section fills the width instead of leaving its right
   half empty. The text lines up with the heading, with or without a label.
   A .full child, such as the three steps, spans both columns underneath. */
@media (min-width: 1080px) {
  .split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: var(--s-12);
    align-items: start;
  }
  .split > .section-head { display: contents; }
  .split > .section-head .label { grid-column: 1; grid-row: 1; }
  .split > .section-head h2 { grid-column: 1; grid-row: 2; }
  .split > :not(.section-head) { grid-column: 2; grid-row: 2; }
  .split > .full { grid-column: 1 / -1; grid-row: 3; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid-3 {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section { padding-block: var(--s-12); }
  .section--hero { padding-block: var(--s-8); }
}

@media (max-width: 480px) {
  .wrap { padding-inline: var(--s-4); }
}