@import "../var";


#footer {
    position: relative;
    background: #030303;
    z-index: 10;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    .footer-content {
        background: #060606;
        padding: to-rem(80px) 0 to-rem(60px);
        position: relative;
        @media screen and (max-width: $breakpoint-tablet) {
            padding: to-rem(60px) 0 to-rem(40px);
        }

        @media screen and (max-width: $breakpoint-mobile) {
            padding: to-rem(50px) 0 to-rem(20px);
        }
    }
    .footer-inner {
        display: flex;

        @media screen and (max-width: $breakpoint-mobile) {
            display: block;
        }
    }
    h3 {
        //font-weight: 400;
        //font-size: to-rem(32px);
        //line-height: 1.3;

        img {
            display: block;
            width: to-rem(56px);
            transform: translateY(-20%);


        }

        @media screen and (max-width: $breakpoint-mobile) {
            margin-bottom: to-rem(40px);
            img {
                margin: 0 auto;
                width: to-rem(42px);
            }
        }
    }

    .widgets {
        margin-left: auto;
        display: flex;
        gap: min(#{to-rem(20px)}, 4vw);
        @media screen and (max-width: $breakpoint-mobile) {
            flex-wrap: wrap;
            margin-left: 0;
            flex-direction: column;
        }
        .widget {
            padding-right: to-rem(20px);
            width: min(#{to-rem(220px)}, 22vw);
            box-sizing: border-box;
            @media screen and (max-width: $breakpoint-mobile) {
                margin: 0 auto to-rem(40px);
                padding-right: 0;
                text-align: center;
            }
            &:last-child {
                width: auto;
            }
            h4 {
                font-weight: 900;
                margin-bottom: 1.5em;
                text-transform: uppercase;
                letter-spacing: 0.04em;
                color: rgba(255,255,255,.4);
                &:after {
                    width: .625em;
                    height: 1px;
                    display: block;
                    content: '';
                    background: rgba(255,255,255,.4);
                    margin-top: 1em;
                    @media screen and (max-width: $breakpoint-mobile) {
                        margin: 1em auto 0;
                    }
                }
            }
            ul {
                line-height: 1.4;
                font-weight: 500;
                letter-spacing: 0.01em;
                li {
                    &+li {
                        margin-top: .5em;
                    }
                }

            }
        }
    }
    .footer-bottom {
        margin-top: to-rem(60px);
        @media screen and (max-width: $breakpoint-tablet) {
            margin-top: to-rem(40px);
        }

        @media screen and (max-width: $breakpoint-mobile) {
            margin-top: to-rem(30px);
        }


        .footer-inner {
            align-items: center;
        }

    }
    
    .footer-menu {
        
        margin-right: auto;
        ul {
            display: flex;
            gap: 2em;
            letter-spacing: .05em;
        }
        @media screen and (max-width: $breakpoint-mobile) {
            margin: 0 auto 1.6em;
            ul {
                gap: 1.425em;
                justify-content: center;
            }
        }
    }
    .copy {
        letter-spacing: .15em;
        text-transform: uppercase;
        @media screen and (max-width: $breakpoint-mobile) {
            margin: 0 auto;
            text-align: center;
        }

    }
    .__sns {
        margin-left: auto;
        display: flex;
        gap: 1em;
        a {
            display: block;
        }

        @media screen and (max-width: $breakpoint-mobile) {
            margin-bottom: to-rem(40px);
            justify-content: center;
        }
    }
}