// FOOTER
.footer{
    padding: 6rem 0;
    color: $grey--medium;
    background: $grey--dark;

    @include desktop{
        padding-top: 4.5rem;
    }
}

.footer__logo{
    display: flex;
    justify-content: flex-start;

    img{
        display: block;
        height: 100%;
        // max-width: 100%;
        max-width: 15rem;
    }

    // @include mobile{
    //     height: 3rem;
    // }
    //
    // @include desktop{
    //     height: 3.75rem;
    // }
    @include desktop--small{
        padding-right: 1.5rem;
    }
    @include desktop--large{
        padding-right: 3rem;
    }
}

.footer__slogan{

    // border
    &:before{
        content: '';
        display: block;
        margin: 3rem 0 1.5rem 0;
        margin-top: calc(3rem - 1px);
        width: 2.25rem;
        height: 1px;
        background: $grey--medium;
    }
}

.footer__nav{

    // general
    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li:not(:first-of-type){
        margin-top: 0.75rem;
    }
    a{
        display: flex;
        color: white;
    }
    svg{
        flex-shrink: 0;
        display: block;
        width: 1rem;
        height: 1rem;
        margin: 0.25rem 0.5rem 0 0;
        fill: $main;
    }

    // first level
    > ul > li > a{
        font-family: $font-family--heading;
        font-weight: 700;
    }

    // second level
    ul ul {
        margin-top: 1.5rem;
    }

    @include mobile{
        margin-top: 3rem;
    }

    @include desktop{
        margin-top: 1.5rem;

        a:hover{
            color: $main;
        }
    }
}

.footer__copyright{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1.5rem;
    font-size: 0.75rem;

    p{
        margin-right: 1.5rem;
    }
    nav{
        margin-top: 1.5rem;
    }
    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;

        display: flex;
        flex-wrap: wrap;
    }
    li:not(:last-of-type){
        margin-right: 1.5rem;
    }
    a{
        color: $grey--medium;
    }

    @include desktop{

        a:hover{
            color: $main;
        }
    }
}