#site-footer {

 


    background-color: var(--dark);
    padding: calc(var(--spacing)*2) var(--padding-body) calc(var(--spacing)*1) var(--padding-body);
    z-index: 500;

    .site-footer__container {
        max-width: var(--max-w-cards);
        margin: 0 auto;
    
        font-size: var(--fs-small);
    }



    .logo {
        // margin-top: calc(var(--spacing)*0.25);
        margin-bottom: calc(var(--spacing)*0.5);

        svg {
            width: 100px;
        }
    }

    .baseline{
        max-width: 40ch;
    }

    .list-links {
        

        ul {
            list-style: none;

             li {
                margin-bottom: calc(var(--spacing)*0.25);
            }

            a {
                text-decoration: none;
            }

            li:hover a {
                text-decoration: underline;
            }
        }

        .hightlight {
            text-transform: uppercase;
            font-weight: 500;
        }
    }


    

    // @media #{$medium} {
        

    //       }

    @media #{$small-up} {
        .site-footer__container {
            display: grid;
            grid-template-columns: 1fr 350px;
            column-gap: calc(var(--padding-inner)*2);

            .logo{ grid-column: span 2;}
            .baseline{
                grid-column: 1;
                grid-row: 2;
            }
            .list-links{
                grid-column: 2;
                grid-row: 2;
                    max-width: 350px;
                 display: flex;
                 justify-content: space-between;
                 gap: var(--padding-inner);
                 
                 
                  
                    li {
                        // margin-bottom: calc(var(--spacing)*1);
                    }
            }
            .socials{
                grid-column: 1;
                grid-row: 3;
            }


            .credits {
                font-size: var(--fs-xsmall);
                 grid-column: 1;
                grid-row: 4;
                   margin-top: calc(var(--spacing)*2);
            }
        }

      


        
    }

    @media #{$small} {

        .list-links {
            margin-top: calc(var(--spacing)*1);
            // li {
            //     margin-bottom: calc(var(--spacing)*0.25);
            // }

            .hightlight {
                margin-top: calc(var(--spacing)*0.5);
            }
        }

  

    .socials {
        margin-top: calc(var(--spacing)*1);
    }

        .credits {
            margin-top: calc(var(--spacing)*2);
        }



    }

       @media #{$x-small} {
          .credits {
            text-align: center;
        }
             }




}