:root {
  --h1-font-size: 3.815rem;
  --h2-font-size: 3.052rem;
  --h3-font-size: 2.441rem;
  --h4-font-size: 1.953rem;
  --h5-font-size: 1.563rem;
  --h6-font-size: 1.25rem;
}

html {
  font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 2rem;
}

h1 {
  font-size: calc(var(--h1-font-size) * 0.8);
}

h2 {
  font-size: calc(var(--h2-font-size) * 0.8);
}

h3 {
  font-size: calc(var(--h3-font-size) * 0.8);
}

h4 {
  font-size: calc(var(--h4-font-size) * 0.8);
}

h5 {
  font-size: calc(var(--h5-font-size) * 0.9);
}

h6 {
  font-size: calc(var(--h6-font-size) * 0.8);
  /* 16px  */
}

@media screen and (min-width:576px) {
  h5 {
    font-size: calc(var(--h5-font-size) * 0.95);
  }

  h6 {
    font-size: var(--h6-font-size);
  }

}

@media screen and (min-width:768px) {
  h1 {
    font-size: calc(var(--h1-font-size) * 0.85);
  }

  h2 {
    font-size: calc(var(--h2-font-size) * 0.85);
  }

  h3 {
    font-size: calc(var(--h3-font-size) * 0.85);
  }

  h4 {
    font-size: calc(var(--h4-font-size) * 0.85);
  }

  h5 {
    font-size: var(--h5-font-size);
  }
}

@media screen and (min-width:992px) {
  h1 {
    font-size: calc(var(--h1-font-size) * 0.9);
  }

  h2 {
    font-size: calc(var(--h2-font-size) * 0.9);
  }

  h3 {
    font-size: calc(var(--h3-font-size) * 0.9);
  }

  h4 {
    font-size: calc(var(--h4-font-size) * 0.9);
  }
}

@media screen and (min-width:1200px) {
  h1 {
    font-size: calc(var(--h1-font-size) * 0.95);
  }

  h2 {
    font-size: calc(var(--h2-font-size) * 0.95);
  }

  h3 {
    font-size: calc(var(--h3-font-size) * 0.95);
  }
}

@media screen and (min-width:1440px) {
  h1 {
    font-size: var(--h1-font-size);
  }

  h2 {
    font-size: var(--h2-font-size);
  }

  h3 {
    font-size: var(--h3-font-size);
  }
}

h1 {
  font-size: var(--h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}