An example of rem-based spacing using css custom properties

base.css

:root {
  --const-modular-scale: 1.25;
  --const-cap-height: 0.6;
  --base-spacing: 0.8rem;  
  
  --alpha:    calc( var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) );
  --beta:     calc( var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) );
  --gamma:    calc( var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) );
  --delta:    calc( var(--const-modular-scale) * var(--const-modular-scale) * var(--const-modular-scale) );
  --epsilon:  calc( var(--const-modular-scale) * var(--const-modular-scale) );
  --zeta:     calc( var(--const-modular-scale) );
  
  --font-size-alpha: calc(var(--alpha) * var(--base-spacing));
  --font-size-beta: calc(var(--beta) * var(--base-spacing));
  --font-size-gamma: calc(var(--gamma) * var(--base-spacing));
  --font-size-delta: calc(var(--delta) * var(--base-spacing));
  --font-size-epsilon: calc(var(--epsilon) * var(--base-spacing));
  --font-size-zeta: calc(var(--zeta) * var(--base-spacing));
  --font-size-base: calc(var(--base-spacing));
  
  --section-spacing: calc(var(--base-spacing)*4) var(--base-spacing);
  
  --baseline-distance: calc( (2em - var(--const-cap-height)*1em) / 2 );
  
  --baseline-shift: var(--baseline-distance);
  --baseline-push: calc(2rem - var(--baseline-shift));
  
}

@media (min-width: 1300px) {
  :root {
    --base-spacing: 1rem;
  }  
}

@media (min-width: 1400px) {
  :root {
    --base-spacing: 1.2rem;
  }  
}


h1, h2, h3, h4, h5, h6, p, li {
  --below: 0;
  font-size: var(--typeset-font-size);
  line-height: 1;
  margin: 0;
  padding-top: var(--baseline-shift) !important;
  margin-bottom: var(--baseline-push) !important;
}


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

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

.gamma, h3 {
  --typeset-font-size: var(--font-size-gamma);
}

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

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

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

.eta, p {
  --typeset-font-size: var(--font-size-base);
}

.theta {
  font-size: calc(var(--base-spacing) * 1 / (var(--const-modular-scale) ) );
}

.iota {
  font-size: calc( var(--base-spacing) * 1 / (var(--const-modular-scale) * var(--const-modular-scale) ));
}



.post-card {
  padding: var(--section-spacing);
}