.landingv2-footer { flex: 0 0 auto; --footer-background-mask-image: linear-gradient(180deg, transparent, var(--background-colour) 30px); margin-top: 4px; padding-top: 20px; } .landingv2-footer-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mask-image: var(--footer-background-mask-image); -webkit-mask-image: var(--footer-background-mask-image); background: var(--background-pattern); background-color: var(--header-accent-colour); background-blend-mode: multiply; } .landingv2-footer-wrapper { max-width: var(--site-max-width); margin: 0 auto; padding: 1em 4px; display: grid; grid-template-columns: repeat(2, 1fr); } .landingv2-footer-navigation {} .landingv2-footer-navigation a { display: inline-block; color: inherit; text-decoration: none; min-width: 200px; cursor: pointer; border-radius: 2px; padding: 4px 10px; margin: 1px 0; transition: background-color .2s; } .landingv2-footer-navigation a:hover, .landingv2-footer-navigation a:focus { background-color: rgba(255, 255, 255, .2); } .landingv2-footer-navigation a:active { background-color: rgba(255, 255, 255, .1); } .landingv2-footer-copyright { text-align: right; line-height: 1.8em; font-size: .9em; align-self: flex-end; } .landingv2-footer-copyright a { color: inherit; text-decoration: none; } .landingv2-footer-copyright a:focus, .landingv2-footer-copyright a:hover { text-decoration: underline; } @media(max-width: 800px) { .landingv2-footer-wrapper { grid-template-columns: 1fr; } .landingv2-footer-navigation { text-align: center; margin: 0 8px; } .landingv2-footer-navigation div { display: inline-block; } .landingv2-footer-navigation a { text-align: center; min-width: 100px; margin: 2px; } .landingv2-footer-copyright { text-align: center; } }