.switcher {
  display: flex;
  flex-wrap: wrap;
  /* ↓ The default value is the first point on the modular scale */
  gap: var(--gutter, var(--s1));
  /* ↓ The width at which the layout “breaks” */
  --threshold: 30rem;
}

.switcher > * {
  /* ↓ Allow children to grow */
  flex-grow: 1;
  /* ↓ Switch the layout at the --threshold */
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.switcher > :nth-last-child(n+5),
.switcher > :nth-last-child(n+5) ~ * {
  /* ↓ Switch to a vertical configuration if
  there are more than 4 child elements */
  flex-basis: 100%;
}

You might want to have a few elements displayed next to each other as columns, but when the page shrinks such that you can no logner display all of them as columns it should automatically switch to displaying them all as rows. Rather, than the standard behaviour of moving them one at a time below the rest.