bandolier-template/admin/bando/demos/AspectRatio.svelte

<style>
  aspect-test {
    display: flex;
    flex-direction: column;
  }

  .top-box p {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--value5);
    font-size: 2.5vw;
    padding: 1rem;
    height: 100%;
  }
</style>

<aspect-test>
  <div class="top-box" style="--aspect-ratio: 16/9;">
    <p>16/9 Aspect Ratio.  This is a test to see if the new CSS aspect-ratio property actually works.
      Let me know if this is not consistently 16/9.
    </p>
  </div>

  <div style="--aspect-ratio: 10/2; background-color: var(--value7); font-size: 1.5vw;">
    <p>10/2 Aspect Ratio.  This is a test to see if the new CSS aspect-ratio property actually works.
      Let me know if this is not consistently 10/2.
    </p>
  </div>
</aspect-test>