@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");

.copy {
    font-family: "Alfa Slab One", serif;
    font-size: 0.8rem;
    text-align: center;
    color: var(--color-headings);
}
footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    .container-logos{
        display: flex;
        align-items: center;
        gap: 30px;

        background-color: #FFCC00;
        margin-bottom: 30px;
        max-width: 85%;

        &::before{
            content: '';
            position: absolute;
            left: 0;
            z-index: -1;

            width: 100%;
            height: 3px;
            background-color: black;
        }
        .detalhe-estrela{
            flex-grow: 1;
            width: 50px;
        }

        .logos{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 30px;

            width: 100%;
            max-width: 100%;
            
            .logo-prefeitura{
                width: 380px;
                max-width: 100%;
                margin-block: 20px;
                aspect-ratio: 1125 / 239 ;
                background-image: url('../img/logo-criciuma.png');
                background-size: contain;
                background-repeat: no-repeat;
            }
        
            .selo-cem-anos{
                height: 80px;
                max-width: 100%;
            }
        }
    }


    &::after{
        content: '';
        background: url('../img/detalhe-quadriculado.png');
        background-repeat: repeat-x;
        background-size: contain;
        width: 100%;
        height: 100px;
    }
}

.copy {
    grid-column: 1/-1;
    grid-row: 2;
    margin-bottom: 30px;
}

@media (max-width:1200px) {
    footer {
        &::after{
            background-size: cover;
        }
    }
}
@media (max-width: 962px) {
    footer{
        .container-logos{
            gap: 15px;

            .logos{
                width: min-content;
            }
        }
    }
}
@media (max-width: 554px) {

    footer{
        .container-logos{
            gap: 15px;

            .logos{
                width: 180px;
                max-width: 100%;
                gap: 0px;
            }
            .detalhe-estrela{
                width: 30px;
            }
        }
    }
}