Switcher

HTML

---
import Card from "@components/Card.astro";
---

<div class="l-switcher" style="--sw-breakpoint: var(--width-48);">
  <Card />
  <Card />
  <Card />
</div>

SCSS

//https://every-layout.dev/layouts/switcher/

.l-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sw-row-gap, var(--sw-gap, var(--vertical-rhythm)))
    var(--sw-column-gap, var(--sw-gap, var(--gutter)));

  > * {
    flex-grow: 1;
    flex-basis: calc((var(--sw-breakpoint, var(--width-default)) - 100%) * 999);
  }

  //limits number of elements to less than 5
  > :nth-last-child(n + 5),
  > :nth-last-child(n + 5) ~ * {
    flex-basis: 100%;
  }
}

Use this pattern to create a row of elements that switches to a single column at a specific breakpoint. Useful in instances where the Cluster or Grid are not appropriate. An example would be if you have an odd number of elements.