:root {
  font-size: 100%;
  --length-scale-base: 1rem;
  --length-scale-base-adjustment: 1.0;
  --length-scale-multiplier: 1.20;
  --content-max-width: 1200px;
  /* https://www.mediaevent.de/css/breakpoints.html */
  --breakpoint-1: 576px;
  --breakpoint-2: 768px;
  /* minor third  */
  --length-scale-0: calc(var(--length-scale-base) * var(--length-scale-base-adjustment));
  --length-scale-1: calc(var(--length-scale-0) * var(--length-scale-multiplier));
  --length-scale-2: calc(var(--length-scale-1) * var(--length-scale-multiplier));
  --length-scale-3: calc(var(--length-scale-2) * var(--length-scale-multiplier));
  --length-scale-4: calc(var(--length-scale-3) * var(--length-scale-multiplier));
  --length-scale-5: calc(var(--length-scale-4) * var(--length-scale-multiplier));
  --length-scale-6: calc(var(--length-scale-5) * var(--length-scale-multiplier));
  --length-scale-7: calc(var(--length-scale-6) * var(--length-scale-multiplier));
  --length-scale-s1: calc(var(--length-scale-0) / var(--length-scale-multiplier));
  --length-scale-s2: calc(var(--length-scale-s1) / var(--length-scale-multiplier));
  --length-scale-s3: calc(var(--length-scale-s2) / var(--length-scale-multiplier));
}

body {
  line-height: 1.50;
  font-size: var(--length-scale-0);
}

@media screen and (min-width:576px) {
  :root {
    /* major third */
    --length-scale-multiplier: 1.25;
  }
}

h1 {
  font-size: var(--length-scale-5);
  font-weight: 600;
}

h2 {
  font-size: var(--length-scale-4);
  font-weight: 600;
}

h3 {
  font-size: var(--length-scale-3);
  font-weight: 600;
}

h4 {
  font-size: var(--length-scale-2);
  font-weight: 600;
}

h5 {
  font-size: var(--length-scale-1);
  font-weight: 600;
}