footer {
    padding-bottom: var(--size) !important;
    row-gap: var(--size);
    z-index: 200;
}

body:not([data-template="contact"]) footer {padding-top: var(--size-xl) !important;}

footer > * {grid-column: 1/-1;}

@media only screen and (min-width: 768px) {
    footer {
        margin: 0;
        padding-bottom: var(--size-xs) !important;
    }
    #footer-title {grid-column: 1/4;}
    #footer-pages {grid-column: -3/-1;}
}

@media only screen and (min-width: 1096px) {
    #footer-pages {grid-column: -2/-1;}
}

@media (hover: hover) {
    #footer-pages a:hover {text-decoration: underline !important;}
}