section {
  margin-block-end: var(--spacing-xl);
}

.grid-triple:not(:last-of-type) {
  margin-block-end: var(--spacing-xl);
}

.grid-triple > p {
  grid-column: span 2;
}

.grid-even:not(:last-of-type) {
  margin-block-end: var(--spacing-m);
}

dl {
  align-self: start;
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: var(--spacing-m);
  row-gap: var(--spacing-s);
}

dd,
p {
  max-inline-size: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 768px) {
  section {
    margin-block-end: var(--spacing-xxl);
  }

  .grid-triple:not(:last-of-type) {
    margin-block-end: var(--spacing-xl);
  }

  .grid-triple > p {
    grid-column: unset;
  }

  section article:not(:first-of-type) {
    dt {
      /* same as sr-only class */
      overflow: hidden;
      position: absolute;
      block-size: 1px;
      inline-size: 1px;
      white-space: nowrap;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
    }

    dd {
      grid-column: 2;
    }
  }

  dl {
    column-gap: var(--spacing-l);
  }

  footer > * {
    grid-column: 2;
  }
}
