Usage

HTML

<div class="l-cluster">
  <a class="button theme" href="#">About</a>
  <a class="button theme" href="#">Products</a>
  <a class="button theme" href="#">Careers</a>
  <a class="button theme" href="#">Contact</a>
</div>

SCSS

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

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--cl-justify, flex-start);
  align-items: var(--cl-align, center);
  gap: var(--cl-row-gap, var(--cl-gap, var(--vertical-rhythm)))
    var(--cl-column-gap, var(--cl-gap, var(--gutter)));
}

Use this layout pattern to create a row of inline elements that wrap.