.menu {
    margin-bottom: 1rem;
}

.switcher > * {
    display: flex;
    flex-wrap: wrap;
}

.switcher > * > * {
    /* each element grows to take up an equal proportion of horizontal space. */
    flex-grow: 1;
    /*
      (30rem - 100%)
      :: If the parent is wider than 30rem, then this will be negative.
      :: If the parent is thinner than 30rem then this will be positive.
      * 999
      :: Make it a large positive or negative value.
      :: A negative flex-basis value is invalid, and will be ignored.
      :: A high positive flex-basis value will cause there to be only 1 element on a row.
   */
    flex-basis: calc((30rem - 100%) * 9999);
}


.menu-item {
    /* border: 1px solid black; */
    cursor: pointer;
    display: inline-block;
}

.menu-item a {
    font-size: 2rem;
    text-decoration: none;
}