footer {
    --grid-links: 1fr;
    --grid-content-1: 1fr;
    --grid-content-2: 1fr;
    --max-width: 100%;

    &.container__footer {
        width: 100%;
        max-width: var(--max-width);
        margin: 7rem auto 0;
        padding: 1rem;

        .content {
            display: grid;
            gap: 1rem;

            &:nth-of-type(1) {
                grid-template-columns: var(--grid-content-1);
            }

            &:nth-of-type(2) {
                grid-template-columns: var(--grid-content-2);
                margin-top: 2rem;
            }

            .logos {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                row-gap: 1rem;

                a{
                    img {
                        width: 100%;
                        max-width: 12rem;
                    }
                }
            }

            .selos {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 2rem;
                margin-top: 2rem;

                p {
                    font-size: 1rem;
                }

                span {
                    display: block;
                    text-align: center;

                    strong {
                        font-size: 1.125rem;
                        font-weight: 600;
                    }
                }
            }

            .redes {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                margin-top: 2rem;
            }

            .links {
                display: grid;
                grid-template-columns: var(--grid-links);
                column-gap: 1rem;

                ul {
                    padding: 0;
                }
            }
        }
    }
}

@media (min-width: 576px) {
    footer {
        --grid-links: 9rem 9rem 1fr;
        &.container__footer {
            padding: 1rem 1.5rem;
        }
    }
}

@media (min-width: 768px) {
    footer {
        --grid-links: 1fr 1fr 20rem;
    }
}

@media (min-width: 992px) {
    footer {
        --grid-links: 1fr 1fr 20rem;
        --grid-content-1: minmax(10rem, 15rem) 1fr;
        --max-width: 1120px;
    }
}

@media (min-width: 1400px) {
    footer {
        --grid-content-2: 1fr 20rem;
        --max-width: 1320px;
        &.container__footer {
            .content {
                .selos {
                    justify-content: start;
                    margin-left: 2rem;
                }
            }
        }
    }
}

@media (min-width: 1620px) {
    footer {
        --max-width: 1500px;
    }
}