#site-footer{

   background-color: black;

   width: 100vw;
   position: relative;
   left: calc(var(--padding-body)*-1);
   padding: calc(var(--padding-body)*2) var(--padding-body);
//    border-top: var(--border-light);

   p{
    margin: calc(var(--spacing)*0.5) 0;

    a{
        text-decoration: none;
        &:hover{
            text-decoration: underline;
        }
    }
   }

   .p__small{
    font-size: var(--fs-x-small);
    // margin-top: calc(var(--spacing)*0.5)
   }

   #list-socials {
    list-style: none;
    columns: 2;
    max-width: 500px;
    margin: 0;
    a{
    
        display: flex;
        align-items: center;
        gap: 1ch;
        text-decoration: none;
        height: calc(var(--spacing)*1);

        &::after{
            content: '↗';
            color: var(--grey-300);
        }
    }

    .text{
        line-height: 1;
       
    }

    .icon{
        width: 20px;
        height: 20px;
        position: relative;
        top: -2px;
    }
    svg{
        display: flex;
        align-items: center;
        width: 20px;
        height: 20px;
      
    }
   }

  


   @media #{$small}{ 
    margin-top: calc(var(--spacing)*2);
    .footer__socials{
        margin-top: calc(var(--spacing)*1.5);
    }
    .footer__mentions{
        margin-top: calc(var(--spacing)*0.5);
        p{       
            // font-size: var(--font-size);
            margin-top: calc(var(--spacing)*2);
        }
    }
   }
   

   @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__mentions{
        grid-column: span 2;
        text-align: center;
        p{       
            font-size: var(--font-size);
            margin-top: calc(var(--spacing)*2);
        }

    }

   }

   @media #{$medium-up}{
        .site-footer__container{
            column-gap:  calc(var(--spacing)*4);
        }
    }

    @media #{$small}{
        .footer__mentions{
            padding-top: calc(var(--spacing)*1);
            p{   margin-top: 0;}
          
            text-align: center;
        }
    }

}