<body>
  <h1>Headline: you need to know this!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus bibendum elit condimentum molestie. Integer dapibus eget enim a consequat. Vestibulum nec rhoncus odio, sed facilisis augue. Nulla congue eleifend nulla, at tincidunt sem auctor et. Vivamus dignissim bibendum quam, quis varius elit tempor ut.</p>
  <h2>First part of the story</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus bibendum elit condimentum molestie. Integer dapibus eget enim a consequat. Vestibulum nec rhoncus odio, sed facilisis augue.</p>
    <h3>This is one aspect</h3>
  <p>Vestibulum nec rhoncus odio, sed facilisis augue. Nulla congue eleifend nulla, at tincidunt sem auctor et. Vivamus dignissim bibendum quam, quis varius elit tempor ut. Nunc consequat, quam et vulputate posuere, metus risus varius orci, eget auctor sapien metus vel.</p>
  <h3>This is another aspect</h3>
  <p>Vivamus dignissim bibendum quam, quis varius elit tempor ut. Nunc consequat, quam et vulputate posuere, metus risus varius orci, eget auctor sapien metus vel.</p>
  <h2>Second part of the story</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus bibendum elit condimentum molestie. Integer dapibus eget enim a consequat. Vestibulum nec rhoncus odio, sed facilisis augue.</p>

</body>
:root{
  --fs-1: 1.125rem;
  --fs-2: 1.5rem;
  --fs-3: 2rem;
  --fs-4: 2.625rem
}

h1{
  font-size: var(--fs-4);
  line-height: 1.2;
}

h2{
  font-size: var(--fs-3);
  line-height: 1.3;
}

h3{
  font-size: var(--fs-2);
  line-height: 1.4;
}

p{
  font-size: var(--fs-1);
  line-height: 1.5;
}

@media (max-width: 40em){
  :root{
    --fs-1: 1rem;
    --fs-2: 1.25rem;
    --fs-3: 1.5625rem;
    --fs-4: 1.9375rem
  }
}



/*Styling unrelated to the example*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html{
  height: 100%;
}

body{
  padding: var(--fs-3);
  
  color: #222222;
  
  font-family: 'Ubuntu', sans-serif;
  
  /*https://www.magicpattern.design/tools/css-backgrounds*/
  background-color: #DBDBDB;
  opacity: 1;
  background-image:  radial-gradient(#999999 1.4000000000000001px, transparent 1.4000000000000001px), radial-gradient(#999999 1.4000000000000001px, #DBDBDB 1.4000000000000001px);
  background-size: 56px 56px;
  background-position: 0 0,28px 28px;
}

body > * + *{
  margin-top: 1em
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.