footer {
    background: url("../media/images/footer-bg.webp") no-repeat;
    background-size: cover;
    padding: clamp(58px, 4.167vw, 160px) 0 clamp(24px, 1.667vw, 64px) 0;
    @include media-query(520px) {
        background-position: bottom;
    }
    .footer-logo {
        img {
            width: clamp(158px, 13.229vw, 460px);
        }
    }
    .underline {
        display: inline-block;
        border-bottom: 4px solid $accent-1;
        &.l2 {
            border-color: $accent-3;
        }
        &.l3 {
            border-color: $accent-2;
        }
    }
    .social-icons {
        display: flex;
        align-items: center;
        gap: $gap-12;

        .icon {
            width: clamp(38px, 2.083vw, 94px);
            height: clamp(38px, 2.083vw, 94px);
            border-radius: $br-12;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border: 1px solid $accent-1;
            overflow: hidden;
            transition: color 0.2s ease;
            z-index: 1;
            transform: translateX(0);

            &::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: $accent-1;
                border-radius: $br-12;
                left: 0;
                top: 0;
                transform: translateX(-100%);
                transition: transform 0.5s ease;
                z-index: -1;
            }
            svg {
                width: clamp(15px, 0.833vw, 52px);
                height: clamp(15px, 0.833vw, 52px);

                path {
                    fill: $accent-1;
                    transition: $transition;
                }
            }

            &:hover {
                &::before {
                    transform: translateX(0);
                }
                svg {
                    path {
                        fill: $white;
                    }
                }
            }
        }
    }
    .link-block {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        @include media-query(520px) {
            margin: 0;
        }
        .unstyled {
            display: inline-flex;
            flex-direction: column;
            gap: $gap-16;
            a {
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
                font-size: clamp(15px, 0.833vw, 52px);
                color: $dark-gray;
                text-decoration: underline;
                text-decoration-color: transparent;
                &:hover {
                    color: $accent-1;
                    text-decoration-color: $accent-1;
                }
            }
        }
    }
    .svg svg {
        width: clamp(18px, 1.25vw, 68px);
        height: clamp(18px, 1.25vw, 68px);
    }
    .touch-block {
        margin-left: auto;
    }
}
