.font__group {
  border: 1px solid var(--color-base-dark-x);
  width: 100%;
  word-wrap: anywhere;
}

.font__group > .box:first-of-type {
  --heading-color: var(--color-light);
  width: 100%;
  background: var(--color-base-dark-x)
}

.font__swatch > p:nth-of-type(1) {
  font-size: var(--s5);
  line-height: var(--s6);
}

.font__swatch > p:nth-of-type(2) {
  font-size: var(--s4);
  line-height: var(--s5);
}

.font__swatch > p:nth-of-type(3) {
  font-size: var(--s3);
  line-height: var(--s4);
}

.font__swatch > p:nth-of-type(4) {
  font-size: var(--s2);
  line-height: var(--s3);
}

.font__swatch > p:nth-of-type(5) {
  font-size: var(--s1);
  line-height: var(--s2);
}

.font__swatch > p:nth-of-type(6) {
  font-size: var(--s0);
  line-height: var(--s1);
}
