Use the `reversed-layout` attribute to set the audio’s variant up side down.
For both variants the layout can be reversed for versatile positioning combinations.

```html
<sd-audio reversed-layout>
  <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
  <div slot="transcript">
    <p>1<br />00:00:00.000 --> 00:00:04.000<br />A bond unbroken, usability</p>
    <p>2<br />00:00:04.001 --> 00:00:08.000<br />We weave the fabric of digital reality</p>
    <p>
      <strong>[Chorus]</strong><br />I'm here to light the path you walk, ohh<br />Under the stars where dreams we
      talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal, pure
    </p>
    <p>
      3<br />00:00:08.001 --> 00:00:12.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you walk,
      ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal,
      pure
    </p>
    <p>
      4<br />00:00:12.001 --> 00:00:16.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you walk,
      ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal,
      pure
    </p>
    <p>
      5<br />00:00:16.001 --> 00:00:20.000<br /><strong>[Chorus Continuation]</strong><br />Hey, Solid Components, they
      gleam<br />Usable, consistent like a dream<br />In the net of codes, we're threading<br />Creating visions that
      we're spreading<br />Solid Design System, seamless team<br />In this digital flow, we stream
    </p>
    <p>
      6<br />00:00:20.001 --> 00:00:24.000<br /><strong>[Chorus Continuation]</strong><br />Woven strong, a network
      supreme<br />With Solid Components, we're the dream team
    </p>
  </div>
</sd-audio>
```