.landingv2-header { flex: 0 0 auto; --header-background-mask-image: linear-gradient(0deg, transparent, var(--background-colour) 100px); padding-bottom: 100px; } .landingv2-header-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-pattern); background-color: var(--header-accent-colour); background-blend-mode: multiply; mask-image: var(--header-background-mask-image); -webkit-mask-image: var(--header-background-mask-image); } .landingv2-header-content { margin: 0 auto; max-width: 800px; } .landingv2-welcome { text-align: center; margin: 10px; } .landingv2-welcome a { color: inherit; text-decoration: none; } .landingv2-welcome img { max-width: 100%; max-height: 100%; vertical-align: middle; } .landingv2-header-menu { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4px; padding: 0 4px; } .landingv2-header-menu-link { color: #fff; text-decoration: none; cursor: pointer; border-radius: 2px; background-color: var(--background-colour); border: 1px solid var(--header-accent-colour); transition: background-color .2s; display: flex; align-items: center; min-height: 70px; font-size: 1.4em; padding: 10px 16px; grid-column: 1; } .landingv2-header-menu-link:hover, .landingv2-header-menu-link:focus { background-color: var(--accent-colour); } .landingv2-auth-link { font-size: 2em; justify-content: center; text-align: center; grid-column: 2; } .landingv2-auth-link-login { grid-row: 1 / span 2; } @media(max-width: 700px) { .landingv2-header-menu { grid-template-columns: 1fr; } .landingv2-auth-link { grid-column: 1; } .landingv2-auth-link-login { grid-row: 1; min-height: 100px; } .landingv2-auth-link-register { grid-row: 2; } }