.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--wco-font-family);
  line-height: var(--wco-font-lineheight-500);
  color: var(--wco-color-neutral-900);
  font-weight: var(--wco-font-weight-500);
  strong, &.bold  {
    font-weight: var(--wco-font-weight-bold);
  }
}

.display-1 {
  font-size: var(--wco-font-size-huge);
  font-weight: var(--wco-font-weight-bold);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-xxl);
  };
}
.display-2 {
  font-size: var(--wco-font-size-xxxl);
  color: var(--wco-color-neutral-900);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-xl);
  };
}
.display-3 {
  font-size: var(--wco-font-size-xxl);
  color: var(--wco-color-neutral-900);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-xl);
  };
}
.display-4 {
  font-size: var(--wco-font-size-xl);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-lg);
  };
}
.display-5 {
  font-size: var(--wco-font-size-lg);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-md);
  };
}

.display-6 {
  font-size: var(--wco-font-size-md);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-sm);
  };
}


.display-body {
  font-size: var(--wco-font-size-sm);
  line-height: var(--wco-font-lineheight-super-distant);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-sm);
  };
}

.display-text {
  font-size: var(--wco-font-size-xxs);
  line-height: var(--wco-font-lineheight-500);
  @media (max-width: 768px) {
    font-size: var(--wco-font-size-xxs);
  };
}

.display-p {
  font-size: var(--wco-font-size-xs);
  line-height: var(--wco-font-lineheight-500);
}

.display-caption {
  font-size: var(--wco-font-size-xxxs);
  line-height: var(--wco-font-lineheight-500);
}