.footer {
    padding: 20px 0;

    .footer__container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        /* Mobile */
        @media (max-width: 767px) {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    .footer__left-container {
        
        /* Mobile */
        @media (max-width: 767px) {
           width: 100%;
        }
    }

    .footer__social-container {
        display: flex;
        gap: 40px;

        /* Mobile */
        @media (max-width: 767px) {
            justify-content: center;
        }

        a {

            img {
                max-width: 35px;
                transition: .2s linear;
            }
            
            &:hover {

                img {
                    transform: scale(1.1);
                    transition: .2s linear;
                }
            }
        }
    }

    .footer__center-container {

        /* Mobile */
        @media (max-width: 767px) {
            order: 3;
            margin-top: 42px;
        }
    }

    .footer__logo {
        display: block;
        max-width: 80px;
        height: auto;
        margin: 0 auto;
    }

    .footer__legal {
        font-size: 8px;
        line-height: 14px;
        font-weight: 800;
        text-align: center;
        max-width: 444px;
        color: var(--color-white);

        /* Mobile */
        @media (max-width: 767px) {
            margin-top: 12px;
        }
    }

    .footer__right-container {

        /* Mobile */
        @media (max-width: 767px) {
            margin-top: 24px;
        }
    }

    .footer__menu {

        .menu {
            display: flex;
            gap: 48px;

            /* Mobile */
            @media (max-width: 767px) {
                flex-direction: column;
                gap: 24px;
                text-align: center;
            }

            li {
                a {
                    font-size: 22px;
                    font-weight: 400;
                    color: var(--color-white);
                    transition: .2s linear;

                    &:hover {
                        font-weight: 700;
                        transition: .2s linear;
                    }
                }
            }
        }
    }
}