.footer {
    > .footer-container {
        display: flex;
        flex-direction: column;
        gap: var(--space-10);
        padding: var(--space-12) 0;

        > .footer-links {
            display: flex;
            justify-content: flex-start;
            gap: var(--space-16);

            > .footer-links-group {
                > h3 {
                    color: rgb(var(--color-primary));
                    font-size: var(--font-size-s);
                    font-weight: var(--font-weight-bold);
                    margin-bottom: var(--space-4);
                }

                > ul {
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-2);

                    a {
                        color: rgb(var(--color-gray-2));
                        font-family: var(--font-main), sans-serif;
                        font-size: var(--font-size-xs);
                    }

                    a:hover {
                        color: rgb(var(--color-primary));
                    }
                }
            }
        }

        > .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-4);
            padding-top: var(--space-6);
            border-top: 1px solid rgb(var(--color-gray-3));

            > p {
                color: rgb(var(--color-gray-2));
            }

            > .footer-contact {
                display: flex;
                align-items: center;
                gap: var(--space-2);

                > img {
                    height: 25px;
                }

                > span {
                    color: rgb(0 115 117);
                }
            }
        }
    }
}

@media (max-width: 820px) {
    .footer {
        text-align: center;

        > .footer-container {
            margin: 0 var(--space-6);

            > .footer-links {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-8);
                justify-items: center;
            }

            > .footer-bottom {
                flex-direction: column;
                gap: var(--space-4);
            }
        }
    }
}