.container {
  margin-left: calc(-1 * var(--spacer) / 1.5);
  margin-right: calc(-1 * var(--spacer) / 1.5);
  padding: calc(var(--spacer) / 1.5) calc(var(--spacer) / 1.5)
    calc(var(--spacer) / 2) calc(var(--spacer) / 1.5);
}

@media (min-width: 40rem) {
  .container {
    padding-left: var(--spacer);
    padding-right: var(--spacer);
    margin-left: calc(-1 * var(--spacer));
    margin-right: calc(-1 * var(--spacer));
  }
}

.section {
  composes: container;

  border-top: 1px solid var(--border-color);
  position: relative;
}

.section.highlight {
  background: var(--background-highlight);
}

.section:first-child {
  padding-top: 0;
  border-top: 0;
}

.grid {
  display: grid;
  gap: calc(var(--spacer) / 2);
  grid-template-columns:
    [full-start] minmax(13rem, 1fr) [break] minmax(7rem, 1fr)
    [full-end];
}