.footer {
    background: url(/img/bg-verde.webp) no-repeat center center;
    background-size: cover;
    padding: 80px 10px 40px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 30px;
}
.f-1 {
    display: grid;
    gap: 30px;
    color: var(--cor-clara);
}
.f-1 a {
    max-width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: bio-sans;
    font-size: 1.125rem;
    font-weight: 600;
}
.f-1 a:hover {
    color: #aaaaaa;
}
.f-1 > div {
    display: grid;
    gap: 30px;
    margin-top: 20px;
}
.tel {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media only screen and (max-width: 680px) {

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .footer-grid > a {
        grid-row: 1;
    }
    
}

@media only screen and (max-width: 345px) {

    .f-1 a {
        gap: 10px;
        font-size: 1rem;
    }
    .tel a {
        font-size: .85rem;
    }
    
}

.direitos {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    color: var(--cor-clara);
}