.classes {
  display: grid;
  gap: var(--space-medium);
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}

.classes__header,
.classes__article,
.classes__output {
  display: grid;
}

.classes__header h2 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.15;
  margin-bottom: -0.1875em;
  margin-top: -0.4375em;
  position: relative;
}

.classes__header h2 a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.classes__header br {
  display: none;
}

.classes__article {
  gap: var(--space-medium);
}

.classes__article p {
  font-size: var(--font-size-x-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.5625em;
}

.classes__article br {
  display: none;
}



@media(min-width: 64em) {

  .classes {
    grid-template-columns: repeat(12, 1fr);
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }

  .classes__header br,
  .classes__article br {
    display: inline;
  }

  .classes__header,
  .classes__output {
    grid-column: 1/-1;
  }

  .classes__article {
    grid-column: span 9;
  }

}