<div class="accordionGroup -horizontal">
  <details name="horizontal-example" class="accordion -horizontal" open>
    <summary class="accordion__summary">
      <img class="accordion__logo" alt="Aster" src="https://placehold.co/160x100/9933ff/fff?text=Aster" />
    </summary>
    <div class="accordion__content">
      <h3 class="accordion__heading">Aster</h3>
      <p>Aster gives the expanded panel its content while the other panels remain compact logo rails at the medium breakpoint and above.</p>
    </div>
  </details>

  <details name="horizontal-example" class="accordion -horizontal">
    <summary class="accordion__summary">
      <img class="accordion__logo" alt="Briar" src="https://placehold.co/160x100/9933ff/fff?text=Briar" />
    </summary>
    <div class="accordion__content">
      <h3 class="accordion__heading">Briar</h3>
      <p>Native details elements that share a name close their open sibling, so this behavior needs no JavaScript.</p>
    </div>
  </details>

  <details name="horizontal-example" class="accordion -horizontal">
    <summary class="accordion__summary">
      <img class="accordion__logo" alt="Cinder" src="https://placehold.co/160x100/9933ff/fff?text=Cinder" />
    </summary>
    <div class="accordion__content">
      <h3 class="accordion__heading">Cinder</h3>
      <p>The accordion source order remains unchanged as the panels expand and collapse horizontally.</p>
    </div>
  </details>

  <details name="horizontal-example" class="accordion -horizontal">
    <summary class="accordion__summary">
      <img class="accordion__logo" alt="Dune" src="https://placehold.co/160x100/9933ff/fff?text=Dune" />
    </summary>
    <div class="accordion__content">
      <h3 class="accordion__heading">Dune</h3>
      <p>Below the medium breakpoint, this group uses the usual stacked accordion layout without any horizontal treatment.</p>
    </div>
  </details>
</div>

@use '@/core' as *;

.accordionGroup {
  &.-horizontal {
    @include breakpoint(md) {
      display: flex;
      gap: 1rem;
      aspect-ratio: 3;
    }
  }
}