:root {
    --footer-background-color: var(--gray-color);
}
.main-footer {
    background-color: var(--footer-background-color);
    color: var(--text-color);
    padding: var(--spacing-x-large) var(--spacing-medium);
    font-size: var(--font-size-small);
    max-width: inherit;
}

.main-footer > .content,
.main-footer-top {
    gap: var(--spacing-x-large);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.main-footer > .content {
    max-width: var(--media-size-small);
    padding-bottom: var(--spacing-large);
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    margin: 0 auto;
}

.main-footer-top {
    flex-direction: row;
}

.main-footer-bottom {
    text-align: center;
}

.main-footer-navigation .branding.logo {
    height: 80px;
}


.main-footer-navigation,
.main-footer-navigation > ul {
    flex-direction: column;
    gap: var(--spacing-medium);
    display: flex;
    text-align: center;
}

.main-footer-navigation li {
    margin-bottom: var(--spacing-xx-small);
}

.footer-legal-links {
    margin-top: var(--spacing-xx-small);
}

.footer-legal-links .separator {
    margin: 0 var(--spacing-x-small);
    color: var(--border-color);
}

@media (max-width: 900px) {

    .main-footer > .content,
    .main-footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .main-footer-top {
        flex-direction: column;
    }
}