.footer{
    padding: map-get($map: $spacers, $key: 2) 0;
    background: $black;
    color: $white;

    &__grid{
        display: grid;
        grid-template-columns: 160px auto 160px;
        grid-gap: map-get($map: $spacers, $key: 2);

        margin-bottom: $spacer-gutter;
    }
    &__logo{
        height: 26px;
        transition: $transition-base;

        &:hover, &:focus{
            filter: opacity(.7);
        }
    }
    &__contact{
        display: flex;
        justify-content: flex-end;
        align-items: center;

        &-item{
            padding-left: map-get($map: $spacers, $key: 1);
            font-size: map-get($map: $font-size, $key: xs);
            color: $white;
            filter: opacity(.75);

            &:hover, &:focus{
                color: $yellow;
                filter: opacity(1);
                text-decoration: none;
            }
        }
    }
    &__icon{
        margin-right: $spacer-gutter;
        transition: $transition-base;
    }
    &__phone{
        font-size: map-get($map: $heading, $key: h5);
        font-weight: $font-weight-bold;
        color: $white;
        text-decoration: none;
        text-align: right;

        &:hover, &:focus{
            color: $yellow;
            text-decoration: none;
        }
    }
    &__additional{
        font-size: map-get($map: $font-size, $key: xs);
        color: $brown-light;

        &-link{
            color: $brown-light;
            &:hover, &:focus{
                color: $white;
            }
        }
    }
    &__sep{
        padding: 0 $spacer-gutter;
    }
}
// < 1440px
@media all and (max-width: map-get($grid-breakpoints, 'xl')){
}
// < 1024px
@media all and (max-width: map-get($grid-breakpoints, 'lg')){
}
// < 768px
@media all and (max-width: map-get($grid-breakpoints, 'md')){
    .footer{
        &__grid{
            grid-template-columns: 160px auto;
            grid-gap: $spacer;

            margin-bottom: $spacer;
        }
        &__phone{
            text-align: left;
        }
    }
}
// < 576px
@media all and (max-width: map-get($grid-breakpoints, 'sm')){
    .footer{
        &__grid{
            grid-template-columns: 1fr;
        }
        
        &__contact{
            justify-content: flex-start;

            &-item{
                padding-left: 0;
                padding-right: map-get($map: $spacers, $key: 1);
            }
        }
    }
}