.masthead { padding: var(--spacer) 0; margin-bottom: var(--spacer-3); } .masthead-title { font-size: 120%; font-weight: bold; color: var(--heading-color); &:hover, &:focus { color: var(--heading-color); text-decoration: none; } } .masthead-tagline { color: var(--body-color-light); } .nav { margin-top: var(--spacer); } .nav-list { list-style: none; margin: 0; padding: 0; } .nav-item { display: inline-block; margin-right: 1em; &:before { content: "/"; } a { color: inherit; &:hover, &:focus { color: var(--link-color); text-decoration: none; } } } @media screen and (min-width: $lg-screen) { .masthead { text-align: center; margin: 0; padding: 0; position: relative; top: 50%; transform: translateY(-50%); } .masthead-title { display: block; font-size: 200%; } .masthead-tagline { display: block; font-size: 100%; } .nav { margin-top: var(--spacer-2); } .nav-item { display: block; margin-right: 0; margin-bottom: var(--spacer); font-size: 120%; &:before { content: none; } a { border-bottom: 2px solid var(--body-color); } } }