/** UI Components – Footer **/ .footer{

background-color: rgba($black,.06);
&__container{
    padding-top:64px;
    padding-bottom:48px;
    @include media-min($sm){
        padding-top:72px;
        padding-bottom:96px;
    }
    @include media-min($xxl){
        padding-top:96px;
        padding-bottom:136px;
    }
}
&__logo{
    display:none;
    @include media-min($sm){
        display:block;
        height:44px;
        margin:0 auto;
    }
    @include media-min($lg){
        margin:0 0 18px 0;
    }
    &--mono{
        display:block;  
        height:40px;
        margin:0 auto 12px auto;
        @include opacity(.24);
        @include media-min($sm){
            display:none;
        }
    }
    &--dark{
        display:none;
    }
}
&__copyright{
    order:4;
    width:calc(100% + 48px);
    margin:48px -18px 0 -18px;
    padding:48px 36px 0 36px;
    color:rgba($black,.38);
    font-size:14px;
    line-height:22px;
    text-align:center;
    border-top:1px solid rgba($black,.12);
    @include media-min($lg){
        order:1;
        width:auto;
        max-width:33.3%;
        margin:0 auto 0 0;
        padding:0;
        text-align:left;
        border-top:0;
    }
    @include media-min($xxl){
        max-width:none;
    }
}
&__widget{
    margin:0 auto;
    text-align:center;
    @include media-min($lg){
        margin:0 64px;
        text-align:left;
    }
    &-title{
        margin-bottom:.75em;
        font-weight:600;
        font-size:1.125em;
        @include media-min($sm){
            font-size:1em;
        }
    }
    &--about{
        width:50%;
        margin-bottom:48px;
        @include media-min($sm){
            width:auto;
            margin-bottom:0;
        }
        @include media-min($lg){
            order:2;
        }
    }
    &--resources{
        width:50%;
        margin-bottom:48px;
        @include media-min($sm){
            width:auto;
            margin-bottom:0;
        }
        @include media-min($lg){
            order:3;
        }
    }
    &--legal{
        width:100%;
        @include media-min($sm){
            width:auto;
        }
        @include media-min($lg){
            order:4;
            margin-right:36px;
        }
    }
}
&__nav{
    margin:0;
    padding:0;
    list-style-type:none;
    &-item{
        margin:8px 0;
        line-height:135%;
    }
    &-link{
        color:inherit;
        font-size:0.88em;
        text-decoration:none;
    }
}

}

/** Dark mode styles **/ body.dark-mode .footer{

background-color: rgba($white,.03);
&__copyright{
    color:rgba($white,.38);
    border-top:1px solid rgba($white,.06);
    @include media-min($lg){
        border-top:0;
    }
}
&__logo{
    display:none;
    &--mono{
        display:none;
    }
    &--dark{
        display:block;
        height:40px;
        margin:0 auto 12px auto;
        @include media-min($sm){
            height:44px;
            margin:0 auto;
        }
        @include media-min($lg){
            margin:0 0 18px 0;
        }
    }
}

}