footer {
    position: relative;
    background-color: var(--color-motion-medium-grey);
    color: var(--color-light);
    bottom: 0;
    margin-top: 10vh !important;
    padding-bottom: 5vh;
    border-width: 1px;
    border-style: solid;
    border-image-source: linear-gradient(90deg, rgba(232, 111, 58, 0) 0%, var(--color-motion-light-blue) 53.5%, rgba(232, 111, 58, 0) 100%);
    border-image-slice: 1;
}

    footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        background: radial-gradient(64.5947% 78.6119% at 50.1416% 84.4193%, rgba(249, 172, 129, 0) 0%, var(--color-motion-teal) 43.5%, rgba(241, 73, 36, 0) 100%);
        filter: blur(100px);
        border-radius: 100%;
        width: 80%;
        height: 100px;
        z-index: -1;
        opacity: 1;
    }

    footer .light-grey {
        background-color: var(--color-motion-grey);
    }

    footer h2 {
        font-size: var(--s1);
        color: var(--color-light);
    }


    footer .partners {
        background-color: unset;
        width: 90vw;
        max-width: var(--grid-max);
        margin: 0 auto;
        padding: var(--s5) 0;
        display: grid;
        gap: var(--grid-gap) calc(var(--grid-gap) / 2);
        grid-template:
            ". . . title title title title . . ."
            ". tier1 tier1 tier1 tier1 tier1 tier1 tier1 tier1 ." minmax(200px, auto)
            ". tier2 tier2 tier2 tier2 tier2 tier2 tier2 tier2 ." minmax(60px, auto)
            ". tier3 tier3 tier3 tier3 tier3 tier3 tier3 tier3 ." minmax(60px, auto)
            / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

        footer .partners .tier {
            display: grid;
            gap: var(--grid-gap);
            align-items: center;
            align-content: center;
            justify-content: center;
        }

        footer .partners .tier img {
            width: auto;
            margin: 0 auto;
            /*aspect-ratio: 4/3;*/
            object-fit: scale-down;
        }

        footer .partners .title {
            grid-area: title;
            text-align: center;
        }

        footer .partners .tier1 {
            grid-area: tier1;
            display: grid;
            grid-template-columns: 1fr;
            max-width:600px;
            margin: 0 auto;
        }

            footer .partners .tier1 img {
                height: 100px;
                max-height: 100px;
                aspect-ratio: 5/1;
            }

/*            footer .partners .tier1 .nascar img {
                max-height: 150px;
            }*/

        footer .partners .tier2 {
            grid-area: tier2;
            grid-template-columns: repeat(4, 1fr);
        }

        footer .partners .tier2 img {
            height: 75px;
            max-height: 75px;
            filter: saturate(0) brightness(0) invert(1);
        }

        footer .partners .tier3 {
            grid-area: tier3;
            grid-template-columns: repeat(8, 1fr);
        }

            footer .partners .tier3 img {
                height: 75px;
                max-height: 75px;
                filter: saturate(0) brightness(0) invert(1);
            }

    footer .content {
        width: 90vw;
        max-width: var(--grid-max);
        margin: 0 auto;
        padding-top: var(--s5);
        display: grid;
        gap: calc(var(--grid-gap) / 4);
        grid-template:
            ". menu1 menu1 menu2 menu2 menu3 menu3 menu4 menu4 ."
            "portal portal portal portal . . socials socials socials socials"
            "links links links links links links links links links links"
            "info info info info info info info . logo logo" minmax(30px, 50px)
            / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

        footer .content a:not(.icon),
        footer .content span {
            font-size: var(--s0);
            padding: 2px 4px;
        }

            footer .content a:not(.icon) {
                color: var(--color-light);
            }

            footer .content a:not(.icon):hover {
                background-color: var(--color-link-hover-bg);
                color: var(--color-light);
                text-decoration:none;
            }

        footer .content .menu {

        }

            footer .content .menu ul {
                padding-left: unset;
            }

            footer .content .menu li {
                list-style: none;
            }

            footer .content .menu h2 {
                margin-left: 4px; /* to match the padding of the links in the list below */
            }

        footer .content .menu1 {
            grid-area: menu1;
        }

        footer .content .menu2 {
            grid-area: menu2;
        }

        footer .content .menu3 {
            grid-area: menu3;
        }

        footer .content .menu4 {
            grid-area: menu4;
        }

        footer .content .portal {
            grid-area: portal;
        }

            footer .content .portal .logon {
                display: flex;
                flex-wrap: nowrap;
                gap: 4px;
                align-items: center;
                align-content: center;
                justify-content: flex-start;
                color: var(--color-motion-orange);
                text-decoration: none;
            }

                footer .content .portal .logon svg {
                    height: var(--s1);
                    max-height: var(--s1);
                }

        footer .content .socials {
            grid-area: socials;
            display: flex;
            gap: var(--grid-gap);
            align-items: center;
            justify-content: flex-end;
        }

            footer .content .socials a {
                transition: none;
                color: #ffffff;
            }

                footer .content .socials a:hover {
                    color: var(--color-motion-orange);
                }

        footer .content .links {
            grid-area: links;
            display: flex;
            gap: var(--grid-gap);
            align-items: center;
            justify-content: flex-start;
        }

        footer .content .info {
            grid-area: info;
            display: flex;
            gap: var(--grid-gap);
            align-items: center;
            justify-content: flex-start;
        }

            footer .content .info p {
                color: var(--color-light);
            }
            

            footer .content .logo {
                grid-area: logo;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }

            footer .content .logo svg {
                max-height: 100%;
            }

@media (max-width: 850px) {
    footer .partners {
        grid-template:
            "title"
            "tier1" minmax(100px, auto)
            "tier2" minmax(60px, auto)
            "tier3" minmax(40px, auto)
            / 1fr;
    }

        footer .partners .tier {
            gap: calc(var(--grid-gap) / 8) calc(var(--grid-gap) / 2);
        }

        footer .partners .tier1 {
            grid-template-columns: 1fr;
            gap: calc(var(--grid-gap) / 2);
        }

            footer .partners .tier1 img {
                height: 100px;
                max-height: 100px;
            }

            footer .partners .tier1 .nascar {
                grid-row: 1; /* put it first on small screens as it looks better */
            }
        /*footer .partners .tier1.nascar img {
max-height: 150px;
}*/
        footer .partners .tier2 {
            grid-template-columns: repeat(2, 1fr);
        }

            footer .partners .tier2 img {
                height: 60px;
                max-height: 60px;
            }

        footer .partners .tier3 {
            grid-template-columns: repeat(4, 1fr);
        }

            footer .partners .tier3 img {
                height: 40px;
                max-height: 40px;
            }

    footer .content {
        gap: calc(var(--grid-gap) / 2) calc(var(--grid-gap) / 4);
        grid-template:
            "menu1 menu2"
            "menu3 menu4"
            "socials socials"
            "portal portal"
            "links links"
            "info info"
            "logo logo" minmax(30px, 40px)
            / 1fr 1fr;
    }

        footer .content .logo {
            justify-content: center;
        }
}