@use "../01-base/typography" as *;
@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../02-abstracts/mixins" as *;

footer{
    .background-image{
        position: relative;
        height: 232px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        .bg-filter{
            @include bg-filter;
            opacity: .4;
        }
    }
    .footer-row{
        padding: 70px 0;
        .logo{
            width: 232px;
            height: 50px;
            margin-bottom: 50px;
        }
        .footer-grid{
            display: grid;
            gap: 20px;
            @include responsive(tablet){
                grid-template-columns: repeat(2, 1fr);
            }
            @include responsive(desktop){
                grid-template-columns: repeat(4, 1fr);
            }
            .footer-menu{
                list-style: none;
                padding-left: 0;
                .menu-item{
                    a{
                        font-size: 1.8rem;
                        line-height: 150%;
                    }
                }
            }
        }
    }
    .footer-copyright{
        background-color: $white-color;
        padding: 22px 0;
        &-grid{
            display: flex;
            justify-content: space-between;
            font-size: 1.2rem;
            list-style: none;
            color: $dark-color;
            @include responsive(tablet){
                font-size: 1.6rem;
            }
            li{
                font-size: 1rem;
                @include responsive(tablet){
                    font-size: 1.6rem;
                }
            }
            a{
                color: $dark-color;
                &:hover{
                    color: $accent-color;
                }
            }
        }
    }
}