Important CSS

.settings-menu
{
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;
  white-space: nowrap;
  max-width: calc(100vw - #{$grid-gutter-width} * 2);

  padding: $menu-padding;

  h2, h3, h4
  {
    width: 100%;
    position: relative;
    margin-bottom: $menu-padding;
  }

  @include media-breakpoint-down(sm)
  {
    flex-basis: 100%;
    min-width: 0;
  }

  @include media-breakpoint-up(md)
  {
    flex-basis: 50%;
  }

  @include media-breakpoint-up(lg)
  {
    flex-basis: 33%;
  }
}

.menu-columns
{
  @extend .horizontal-scrollable;

  display: flex;
  flex-direction: row;
  flex-grow: 1;

  column-gap: $menu-padding * 2;
  row-gap: $menu-padding * 2;

  .menu-contents
  {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    row-gap: $grid-gutter-width;
  }
}

.entire-controlgroup
{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  align-items: stretch;

  row-gap: $grid-gutter-width;

  .controlgroup-wrapper
  {
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    column-gap: $grid-gutter-width;
    row-gap: $grid-gutter-width;

    .controlgroup-menus
    {
      @extend .horizontal-scrollable;

      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;

      display: flex;
      flex-direction: row;
      flex-grow: 1;

      column-gap: $grid-gutter-width;
      row-gap: $grid-gutter-width;

      .settings-menu
      {
        max-width: unset;

        .menu-columns .menu-contents
        {
          scroll-snap-align: start;
        }
      }
    }
  }

  .settings-menu.controlgroup-complement
  {
    flex-basis: 20%;
  }
}