.nav { display: flex; flex-direction: column; justify-content: space-between; margin-left: 4rem; } .nav__section { text-align: right; &--languages { line-height: 1; margin-bottom: 0.5rem; @media (max-width: 40em) { margin-bottom: 0.8rem; } } &--pages { line-height: 1.4; font-size: 1.2rem; } } .nav__item { display: inline-block; &:not(:first-child) { margin-left: 0.5em; } &--compact:not(:first-child) { margin-left: 0.25em; } &--active .nav__link { color: $color--brand-secondary; pointer-events: none; } } @media (max-width: 40em) { .nav { margin: 0; margin-top: 1.5rem; width: 100%; } .nav__section { text-align: center; } }