.paragraph {
  font-size: var(--font-paragraph-mobile);
  line-height: var(--line-height-large);
  text-align: left;
  hyphens: auto;
  width: var(--width-100);
  margin: 0 auto;
}

.paragraph--invert-selection::selection {
  background: var(--primary-color);
}

@media only screen and (min-width: 768px) {
  .paragraph {
    width: var(--width-97);
  }
}

@media only screen and (min-width: 1200px) {
  .paragraph {
    --max-size: 20;
    --min-size: 19;
    font-size: var(--responsive);
    line-height: var(--line-height-xlarge);
    width: var(--width-85);
  }
}

.paragraph--footer {
  text-align: left;
  margin-bottom: var(--spacing-fixed-6);
  width: var(--width-100);
  font-size: var(--font-paragraph-mobile);
}

.paragraph--footer-spacing {
  margin-bottom: var(--spacing-1);
}