.footer-main {
    background-color: var(--color-highlight);
    color: var(--color-primary-dark);
}

.footer-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.footer-col {
    width: 100%;
}

.footer-col-list {
    margin-top: var(--spacing-md);
}

.footer-socials,
.footer-link-contact {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.footer-link {
    margin-top: var(--spacing-sm);
}

@media screen and (width > 700px) {

    .footer-col {
        width: 50%;
    }

}

@media screen and (width > 1100px) {

    .footer-flex {
        display: flex;
        flex-wrap: nowrap;
    }

    .footer-col {
        width: 33.33%;
    }

}