body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-paper);
}

.container {
  width: min(var(--container-max), 100% - var(--container-pad) * 2);
  margin-inline: auto;
}

.container--narrow {
  width: min(var(--container-narrow), 100% - var(--container-pad) * 2);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-xl);
}

.section--dark {
  background: var(--color-ink);
  color: var(--color-paper);
}

.image-break {
  height: 40vh;
  min-height: 240px;
  overflow: hidden;
  position: relative;
}

.image-break picture {
  display: block;
  height: 100%;
}

.image-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .image-break img {
    height: 130%;
    margin-top: -15%;
  }
}