<ol>
  <li class="size-alpha">size-alpha</li>
  <li class="size-beta">size-beta</li>
  <li class="size-delta">size-delta</li>
  <li class="size-epsilon">size-epsilon</li>
  <li class="size-zeta">size-zeta</li>
</ol>

:root {
	--scale: 1.618;
	--size-zeta: 0.75rem;
	--size-epsilon: calc(var(--scale) * var(--size-zeta));
	--size-delta: calc(var(--scale) * var(--size-epsilon));
	--size-beta: calc(var(--scale) * var(--size-delta));
	--size-alpha: calc(var(--scale) * var(--size-beta));
  --size-giga: calc(var(--scale) * var(--size-alpha));
  
  @media screen and (min-width: 40em) {
    --size-zeta: 1rem;
  }
}


.size-giga { 
  font-size: var(--size-giga);
}

.size-alpha { 
  font-size: var(--size-alpha);
}

.size-beta { 
  font-size: var(--size-beta);
}

.size-delta { 
  font-size: var(--size-delta);
}

.size-epsilon { 
  font-size: var(--size-epsilon);
}

.size-zeta { 
  font-size: var(--size-zeta);
}


/* CodePen setup */
body {
  background-color: #ee7e79;
  color: #020101;
  font-family: 'Crimson Text', serif;
  margin: var(--size-delta);
}

ol {
  list-style: none;
  padding: 0;
  
  li {
    margin-bottom: var(--size-epsilon);
    padding-bottom: var(--size-epsilon);
    border-bottom: 1px dashed #020101;
    
    &:last-of-type {
      border: none;
    }
  }
}