.menu {
  grid-area: menu;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: fit-content;

  position: sticky;
  top: 0px;
  z-index: 1;
  padding: calc(var(--gutter-width) / 2);

  background-color: #fff;
  border-bottom: 1px solid rgb(196, 196, 196);
}

.menu .title {
  align-self: flex-start;

  display: flex;
  justify-content: center;
  padding: calc(var(--gutter-width) / 2);

  font-family: SuisseIntl-Medium;
  color: #c6c6c6;
  font-size: calc(var(--fontSize) * 0.85);
  margin-right: calc(var(--gutter-width));
}

@media only screen and (max-width: 960px) {
  .menu .title {
    display: none;
  }
}

.menu ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  padding: 0;
}

.menu li {
  cursor: pointer;
  user-select: none;
}

/* .menu li:first-child {
	margin-left: 0;
  } */

.menu li a {
  font-size: calc(var(--fontSize) * 0.85);
  color: black;
  text-decoration: none;

  display: flex;
  justify-content: center;
  padding: calc(var(--gutter-width) / 2);

  border: 1px solid hsla(0, 0%, 100%, 0);

  transition: all 0.15s ease-in-out 0s;
  cursor: pointer;
  user-select: none;
}

.menu li :hover {
  border-bottom: 3px solid black;
}

.menu .selected {
  border-bottom: 3px solid rgb(203, 203, 203);
  pointer-events: none;
}