.section {
  padding: var(--section-gutter) 0;
  @media (min-width: 40em) {
    &[data-spacing="first"] {
      padding-top: var(--section-gutter-double);
    }
    &[data-spacing="last"] {
      padding-bottom: var(--section-gutter-double);
    }
    &[data-spacing="standalone"] {
      padding: var(--section-gutter-double) 0;
    }
  }
}

.section[data-fullwidth="true"] {
  display: subgrid;
  & > * {
    grid-column: 2 / 3;
  }
}

.section[data-gutterless="true"] {
  margin-left: var(--page-gutter-offset);
  margin-right: var(--page-gutter-offset);
}