#menu-foot ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2em;
	list-style-type: none;
}
#menu-foot ul li a, #menu-foot ul li strong {
	display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    background-image: linear-gradient(to right, var(--magenta) 50%, #ffffffcc 50%);
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
    background-position: 100% 0%;
    transition: background-position 0.25s linear;
}
#menu-foot ul li.active strong,
#menu-foot ul li.trail strong,
#menu-foot ul li a:hover {
	background-position: 0% 0%;
}


@media screen and (max-width:864px) {
    #menu-foot ul {
        justify-content:space-around;
        flex-wrap: wrap;
        gap: 1em;
        margin: 1em 0;
    }
}