@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:wght@400;700&display=swap');

html {
  font-family: var(--body-font-family);
  color: var(--color-black);
  font-size: 1rem;
}

body h1 {
    font-weight: bold;
    font-family: var(--font-family-headings);
    color: var(--color-text);
    font-size: 3.5rem;
    line-height: 3.75rem;
  }

@media (max-width: 61.9375rem) {

body h1 {
    font-size: 1.625rem;
    line-height: 1.75rem;
  }
  }

body h2 {
    font-weight: bold;
    font-family: var(--font-family-headings);
    color: var(--color-text);
    font-size: 2.75rem;
    line-height: 3.125rem;
  }

@media (max-width: 61.9375rem) {

body h2 {
    font-size: 1.5rem;
    line-height: 1.625rem;
  }
  }

body h3 {
    font-weight: bold;
    font-family: var(--font-family-headings);
    color: var(--color-text);
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

@media (max-width: 61.9375rem) {

body h3 {
    font-size: 1.25rem;
    line-height: 1.375rem;
  }
  }

body h4 {
    font-weight: bold;
    font-family: var(--font-family-headings);
    color: var(--color-text);
    font-size: 1.625rem;
    line-height: 1.75rem;
  }

body h5 {
    font-weight: bold;
    font-family: var(--font-family-headings);
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1.625rem;
  }

body h6 {
    font-weight: bold;
    font-family: var(--font-family-headings);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1.375rem;
  }

@media (max-width: 61.9375rem) {

body h6 {
    font-size: 1.125rem;
  }
  }

.max-1-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.max-2-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.max-3-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.max-4-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.max-5-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}