<script>
  let first_top = true;
</script>

<style>
  display {
    width: 100%;
    border: 1px solid var(--value0);
    display: flex;
    flex-direction: row;
  }

  first {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--red);
    color: var(--value8);
  }

  second {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--yellow);
  }
</style>

<display class="stacked" style="--aspect-ratio: 10/3;">
  <first class="layer" class:top={ first_top }>
    <h1>I Am On Top</h1>
  </first>
  <second class="layer" class:top={ !first_top }>
    <h1>I Am On Bottom</h1>
  </second>
</display>
<br/>

<button on:click={() => first_top = !first_top}>Swap Layers</button>
