.header { padding: var(--gap) 0; z-index: 1; &-wrapper { position: relative; display: flex; justify-content: space-between; align-items: center; } } .logo-wrapper { font-size: 40px; letter-spacing: 10px; /*@media screen and (max-width: 990px) { font-size: 0; .tag { font-size: 40px; } }*/ &:hover { text-decoration: none; } } .menu { @media screen and (max-width: 990px) { display: none; position: absolute; top: calc(var(--gap) * 2); left: var(--gap); width: calc(100% - var(--gap) * 2); background: #ffffff; padding: var(--gap); text-align: center; border-radius: 5px; -webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2); } &-item { display: block; @media screen and (min-width: 991px) { display: inline-block; } &:not(:last-child) { @media screen and (max-width: 990px) { margin-bottom: var(--gap); } @media screen and (min-width: 991px) { margin-right: var(--gap); } } a { font-family: "BarlowCondensed-Bold", sans-serif; letter-spacing: 2px; } } } .mobile-nav { width: 32px; height: 32px; background-image: url("images/icon-hamburger.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; -webkit-transition: background-image 0.3s ease; -o-transition: background-image 0.3s ease; transition: background-image 0.3s ease; &.active { background-image: url("images/icon-close.svg"); background-size: contain; -webkit-transition: background-image 0.3s ease; -o-transition: background-image 0.3s ease; transition: background-image 0.3s ease; } @media screen and (min-width: 991px) { display: none; } }