#site-footer{

   background-color: var(--dark);
   padding: calc(var(--padding-body)*2) var(--padding-body);


   .logo {
    margin-top: calc(var(--spacing)*0.25);
    margin-bottom: calc(var(--spacing)*1);
        svg{
            width: 100px;
        }
   }

   p{
    margin: calc(var(--spacing)*0.5) 0;
    a{
        text-decoration: none;
        &:hover{
            text-decoration: underline;
            color: currentColor;
        }
    }
   }

   .p__small{
    font-size: var(--fs-x-small);
    color: var(--grey-600);
   }

   .footer__mentions{
        p{       
            font-size: var(--fs-small);
            color: var(--color-txt)
        }
    }



   @media #{$small}{ 
    margin-top: calc(var(--spacing)*2);

 
    .footer__socials{
        margin-top: calc(var(--spacing)*0.75);
        padding-top: calc(var(--spacing)*0.25);
        border-top: var(--border-light);

        .list-socials{
            margin-top: calc(var(--spacing)*0.5);
            margin-bottom: calc(var(--spacing)*0.75);
        }
    }
    .footer__mentions{
       
        border-top: var(--border-light);
        padding-top: calc(var(--spacing)*0.25);
        p{       
            font-size: var(--fs-small);
            text-align: center;
        }
    }
   }


   @media #{$small-up}{

    .site-footer__container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap:  calc(var(--spacing)*2);
    
        max-width: 1200px;
        margin: 0 auto;
    }

    .footer__socials .container{
        max-width: 400px;
        columns: 2;
        margin-top: calc(var(--spacing)*1);
    }
    
    .footer__mentions{
        grid-column: span 2;
        p{       
            margin-top: calc(var(--spacing)*1);
        }

    }

   }


}