h1,
.h1 {
  font-family: var(--header-font-family);
  font-weight: var(--header-font-weight);
  margin-top: var(--header-margin-top);
  margin-bottom: var(--header-margin-bottom);
  line-height: var(--header-line-height);
  color: var(--header-color);
  font-size: var(--h1-size-mobile);
}
@media screen and (min-width: 768px) {
  h1,
.h1 {
    font-size: var(--h1-size-desktop);
  }
}

h2,
.h2 {
  font-family: var(--header-font-family);
  font-weight: var(--header-font-weight);
  margin-top: var(--header-margin-top);
  margin-bottom: var(--header-margin-bottom);
  line-height: var(--header-line-height);
  color: var(--header-color);
  font-size: var(--h2-size-mobile);
}
@media screen and (min-width: 768px) {
  h2,
.h2 {
    font-size: var(--h2-size-desktop);
  }
}

h3,
.h3 {
  font-family: var(--header-font-family);
  font-weight: var(--header-font-weight);
  margin-top: var(--header-margin-top);
  margin-bottom: var(--header-margin-bottom);
  line-height: var(--header-line-height);
  color: var(--header-color);
  font-size: var(--h3-size-mobile);
}
@media screen and (min-width: 768px) {
  h3,
.h3 {
    font-size: var(--h3-size-desktop);
  }
}

h4,
.h4 {
  font-family: var(--header-font-family);
  font-weight: var(--header-font-weight);
  margin-top: var(--header-margin-top);
  margin-bottom: var(--header-margin-bottom);
  line-height: var(--header-line-height);
  color: var(--header-color);
  font-size: var(--h4-size-mobile);
}
@media screen and (min-width: 768px) {
  h4,
.h4 {
    font-size: var(--h4-size-desktop);
  }
}

h5,
.h5 {
  font-family: var(--header-font-family);
  font-weight: var(--header-font-weight);
  margin-top: var(--header-margin-top);
  margin-bottom: var(--header-margin-bottom);
  line-height: var(--header-line-height);
  color: var(--header-color);
  font-size: var(--h5-size-mobile);
}
@media screen and (min-width: 768px) {
  h5,
.h5 {
    font-size: var(--h5-size-desktop);
  }
}

p,
span {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  font-size: var(--p-size-mobile);
}
@media screen and (min-width: 768px) {
  p,
span {
    font-size: var(--p-size-desktop);
  }
}

b,
strong {
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  font-size: var(--p-size-mobile);
}
@media screen and (min-width: 768px) {
  b,
strong {
    font-size: var(--p-size-desktop);
  }
}

.modal-button {
  text-decoration: underline;
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 500;
  margin: 1.5rem 0;
  padding: 0;
  border: none;
  color: var(--color-primary);
  background: transparent;
}
.modal-button:hover, .modal-button:focus {
  color: var(--color-grey4);
}