.footer {
    padding: 60px 10px 0;
    position: relative;

    &>img {
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(-25%) rotateZ(180deg);

    }

    &::after {
        position: absolute;
        content: "";
        left: 0;
        top: -20%;
        display: block;
        box-shadow: 0 0 150px 100px #b896647e;
    }

    @media only screen and (max-width:635px) {
        &>img {
            display: none;
        }

        &::after {
            display: none;
        }
    }
}

.footer-grid {
    display: grid;
    justify-items: center;
    gap: 50px;

    .footer-img {
        @include flex(15px);

        h4 {
            letter-spacing: 3px;
            font-size: rem(10);
            margin-bottom: 3px;
        }

        .eco {
            max-width: 102px;
        }
    }

    .footer-content {
        @include flex(40px, center, start);
        flex-wrap: wrap;


        div {
            display: grid;
            gap: 12px;
            justify-items: center;
            text-align: center;

            h4 {
                @include font(20, 600);
            }

            a {
                font-size: rem(20);

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

        @media only screen and (max-width:500px) {
            text-align: center;

            div {
                justify-items: center;
            }
        }
    }

}

.footer-bottom {
    text-align: center;
    color: $main;
    padding: 20px;
    border-top: 1px solid #b896646e;
    @include font(20, 600);
    margin-top: 100px;
}