<header class="header">
  <div class="header__title">
    <h1>
      <code>calc()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=calc">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, the following <code>div</code> element has an aspect ratio of 16:9 set on it using the <code>calc()</code> CSS function:
    </p>
    <div class="example__calc"></div>
  </div>

  <aside>
    <p>
      <small>Read more about <a href="https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/">creating an aspect ratio unit for CSS</a>.</small>
    </p>
  </aside>  
</main>

// Demo
.example__calc {
  background: linear-gradient(45deg, var(--color-jaffa) 0%, var(--color-hibiscus) 100%);
  padding-top: calc(9 / 16 * 100%);
  width: 100%;
}


// Pen Setup
.example__calc {
  margin-top: var(--size-epsilon);
}