.footer-top {
    .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        margin-bottom: 23px;
    }

    .social-links {
        margin: 20px 0 0 -8px;
    }
}

.footer-links:not(.footer-tags) {
    .list-inline {
        li {
            display: block;
            margin-bottom: 14px;

            &:last-child {
                margin-bottom: 0;
            }

            a {
                display: inline-block;
                max-width: 100%;
                color: var(--color-gray);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: top;
                transition: var(--transition-150);

                &:hover {
                    color: var(--color-primary);
                }
            }
        }
    }
}

.footer-tags {
    .title {
        margin-bottom: 28px;
    }

    .list-inline {
        margin-bottom: -7px;

        li {
            display: inline-block;
            max-width: 100%;
            margin: 0 4px 7px 0;

            &:last-child {
                margin-right: 0;
            }

            a {
                font-size: 14px;
                line-height: 30px;
                display: flex;
                align-items: center;
                color: var(--color-gray);
                border: 1px solid var(--color-gray-lite);
                border-radius: var(--radius-default);
                padding: 0 10px;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                svg {
                    width: 15px;
                    height: 15px;
                    margin-right: 5px;

                    path {
                        transition: var(--transition-150);
                        stroke: var(--color-black-35);
                    }
                }

                &:hover svg path {
                    stroke: var(--color-primary);
                }

                &:hover {
                    color: var(--color-primary);
                    border-color: var(--color-primary-alpha-80);
                }
            }
        }
    }
}

@media screen and (max-width: 991px) {
    .footer-top {
        > .row {
            > div:nth-child(4) {
                .footer-links {
                    margin-top: 38px;
                }
            }
        }
    }

    .footer-tags {
        margin-top: 38px;
    }
}

@media screen and (max-width: 767px) {
    .footer-top {
        .social-links {
            margin: 19px 0 -3px -8px;
        }
    }

    .footer-links {
        margin-top: 38px;
    }
}
