[Projeto] Fiz o footer sozinho para testar os conhecimentos

    <footer class="rodape">
        <div class="rodape__alura">
            <p class="rodape__texto">Grupo Alura</p>
        </div>

        <div class="rodape__educacao">
            <lu class="lista__educacao">
                <li class="lista__educacao--titulo">EDUCAÇÃO</li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/Caelum.svg">Caelum</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/CasaDoCodigo.svg">Caelum</a></li>
            </lu>  
        </div>

        <div class="rodape__educacao">
            <lu class="lista__educacao">
                <li class="lista__educacao--titulo">EDUCAÇÃO ONLINE</li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/Alura.svg">Alura</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/AluraEmpresas.svg">Alura para empresas</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/AluraLATAM.svg">Alura LATAM</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/AluraStart.svg">Alura start</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/MusicDot.svg">MusicDot</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/AluraLingua.svg">Alura língua</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/PM3.svg">PM3</a></li>
            </lu> 
        </div>

        <div class="rodape__educacao">
            <lu class="lista__educacao">
                <li class="lista__educacao--titulo">COMUNIDADE</li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/HipstersTech.svg">Hipsters ponto Tech</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/ScubaDev.svg">Scuba Dev</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/LayersTech.svg">Layers ponto Tech</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/LikeABoss.svg">Like a Boss</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/CarreiraSemFronteira.svg">Carreira sem Fronteira</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/HipstersJobs.svg">Hipsters ponto Jobs</a></li>
                <li class="lista__educacao--item"><a href="#" class="lista__educacao--link"><img class="imagem__lista--educacao" src="/imagens/GUJ.svg">GUJ</a></li>
            </lu> 
        </div>
    </footer>

CSS

.rodape {
    background-color: var(--branco);
    margin-top: 0.2em;  
}

.rodape__texto {
    font-size: 24px;
    padding: 1em 0 1.5em 1em;
}

.lista__educacao,
.lista__educacao--link,
.imagem__lista--educacao {
    display: none;
}

@media screen and (min-width: 1024px) {

    .rodape {
        display: flex;
        justify-content: space-between;
        background-color: var(--branco);
        margin-top: 0.2em;
        padding: 3em 0;  
    }
    
    .rodape__texto {
        font-size: 24px;
        padding: 1em 0 1.5em 1em;
    }
    
    .lista__educacao {
        font-size: 14px;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        margin: 0 3em;

    }
    
    .lista__educacao--link {
        text-decoration: none;
        display: flex;
        align-items: center;
        color: var(--cinza-rodape);
    }
    
    .imagem__lista--educacao {
        margin: 0 1em;
        display: flex;
    }

    .lista__educacao--titulo,
    .lista__educacao--item {
        margin: 1em 0;
        color: var(--cinza-rodape);
    }

}