@import './assets/styles/global.scss'; .mob-interviews-link { display: flex; justify-content: space-between; margin-bottom: calculateRem(24); @media (min-width: $desktop) { display: none; } button { color: #fff; padding: 0; font-size: calculateRem($body-font-size); &:hover span { text-decoration: underline; } img { position: relative; top: calculateRem(2); } } } .interviews-nav-wrap { @media (min-width: $desktop) { display: flex; justify-content: space-between; justify-content: flex-end; position: relative; } } .interviews-list { @media (min-width: $desktop) { position: absolute; top: 0; left: 0; height: 100%; overflow: auto; width: 95%; } /* width */ &::-webkit-scrollbar { width: calculateRem(16); } /* Track */ &::-webkit-scrollbar-track { background: $navy-dark; border: 2px solid $navy; } /* Handle */ &::-webkit-scrollbar-thumb { background: $navy; } .letter-block { color: #fff; padding-bottom: calculateRem(32); > div { font-size: calculateRem(32); margin-bottom: calculateRem(20); } } button { border: 0; padding: 0; text-align: left; font-size: calculateRem(18); line-height: 1.3; margin-bottom: calculateRem(12); color: #fff; &:hover { text-decoration: underline; } } } .letters-nav { display: none; @media (min-width: $desktop) { display: flex; flex-direction: column; button { color: #fff; margin-bottom: calculateRem(8); text-transform: lowercase; &.active { background-color: $red; } } } }