footer {
    background-color: var(--color-motion-medium-grey);
    color: var(--color-light);
    bottom: 0;
    margin-top: 10vh !important;
    padding-bottom: 2vh;
}

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

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

    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(80px, 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: repeat(2, 1fr);
        }

            footer .partners .tier1 img {
                height: 200px;
                max-height: 200px;
                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: 95px;
                max-height: 95px;
                filter: saturate(0) brightness(0) invert(1);
            }

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

            footer .partners .tier3 img {
                height: 60px;
                max-height: 60px;
                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):hover {
                background-color: var(--color-link-hover-bg);
                color: var(--color-light);
            }

        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-link);
                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 .logo {
            grid-area: logo;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

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

@media (width <= 50em) {
    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;
        }
}