CSS Pow Function Basic

<!DOCTYPE html>
<title>My Example</title>

.pow-container div {
    margin-bottom: 15px;
    line-height: 1.2;
  }
  
  .pow-container div:last-child {
    margin-bottom: 0;
  }

/* 
    Calculate the font sizes using pow().
    Formula: Base Size * (Ratio ^ Power)
  */
  
  /* Power of -1 (Smaller than base) */
  .text-sm {
    font-size: calc(var(--base-size) * pow(var(--ratio), -1));
    color: #6c757d;
  }

/* Power of 0 (Equals 1, so it stays at the base size) */
  .text-base {
    font-size: calc(var(--base-size) * pow(var(--ratio), 0));
  }

/* Power of 1 */
  .text-md {
    font-size: calc(var(--base-size) * pow(var(--ratio), 1));
    font-weight: 500;
  }

/* Power of 2 */
  .text-lg {
    font-size: calc(var(--base-size) * pow(var(--ratio), 2));
    font-weight: 600;
  }

/* Power of 3 */
  .text-xl {
    font-size: calc(var(--base-size) * pow(var(--ratio), 3));
    font-weight: 700;
    color: #0d6efd;
  }
</style>

<div class="pow-container">
  <div class="text-xl">Heading Extra Large (pow 3)</div>
  <div class="text-lg">Heading Large (pow 2)</div>
  <div class="text-md">Heading Medium (pow 1)</div>
  <div class="text-base">Standard body text (pow 0)</div>
  <div class="text-sm">Small caption text (pow -1)</div>
</div>