start9-landing/src/assets/styles/footer.scss

footer{
    transform: translate(0px, 0vh);
    //position: absolute;
    padding: 0;
    font-weight: 400;
    color: gray;
    .footer__copyright, .footer__donate{
        font-size: max(14px, 0.8rem);
    }
    .footer__content{
        display: flex;
        .header{
            align-self: flex-start;
            margin: 1.8rem 0 0 5rem;
            svg{
                width: 12rem;
            }
        }
    }
    background-color: black;
    .groups{
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        .half {
            grid-row: span 1;
        }
        .full {
            grid-row: span 2;
        }
        & > li {
            //margin-top: 5rem;
            padding: 2.5rem 2.5rem;
            &:nth-child(-n+2){
                // border-right: var(--b-secondary);
            }
        }
        // & > *{
        //     outline: 1px solid orange;
        // }
    }
    h1{
        font-family: var(--f-accent-bold);
        font-size: .9rem;
        color: var(--c-text-primary);
        margin-bottom: 1.7rem;
    }
    .groups li > a {
        font-family: var(--f-accent);
        font-size: max(14px,.8rem);
        line-height: 1.5;
        font-weight: 300;
        //text-transform: uppercase;
        letter-spacing: .1em;
        color: var(--c-text-primary);
        position: relative;
        display: flex;
        flex-direction: column;
        display: inline-block;
        white-space: nowrap;
        // &::after{
        //     content: '';
        //     position: absolute;
        //     transition: var(--t-simple);
        //     display: inline-block;   
        //     width:0;
        //     height: 85%;
        //     left: 50%;
        //     opacity: 0;
        // }
        &:hover {
            color: var(--c-text-accent);
            // &::after{
            //     border: var(--b-primary);
            //     width: 110%;
            //     left: -5%;
            //     opacity: 1;
            // }
        }
        &.highlight{
            color: var(--c-text-bright);
            font-weight: 300;
            &::before{
                content: '';
                z-index: -1;
                //border: var(--b-primary);
                background-color: var(--c-text-accent);
                width: 110%;
                left: -5%;
                display: inline-block; 
                height: 85%; 
                position: absolute;
            }
        }

    }
}

.footer__canary{
    text-align: center;
    padding: 2rem;
}

@media only screen and (max-width: 1200px) {
    footer .groups li > a {
      font-size: 2vw;
    }
  }

  @media only screen and (max-width: 650px) {

    footer .footer__content {
        flex-direction: column;
        .header{
            margin: 5rem 0 2.5rem 2.5rem;
        }
        .groups .full {
            grid-row: auto;
        }
        .groups li > a {
            font-size: 3.5vmin;
          }
          .groups{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            li {
                border: 0 !important;
            }
        }
    }
  }

  @media only screen and (max-width: 500px) {
    footer .groups li > a {
      font-size: 4vmin;
    }
    footer .groups{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    footer .footer__content {
        flex-direction: column;
        .header{
            margin: 2.5rem 5rem;
        }
        .groups > li{
            padding: 2.5rem 5rem;
        }
    }
  }