[Projeto] Lista de exercícios

HTML

 <footer class="rodapé">
        <h2 class="rodapé__titulo">Grupo Alura</h2>
        <ul class="lista-rodapé">
            <li class="lista-rodapé__titulo">Educação</li>
            <li class="lista-rodapé__item">
                <img src="img/CasaDoCodigo.svg"     alt="Logo da casa do código">
                <a href="#" class="lista-rodapé__link">Casa do código</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/Caelum.svg" alt="Logo da caelum">
                <a href="#" class="lista-rodapé__link">Caelum</a>
            </li>
        </ul>

        <ul class="lista-rodapé">
            <li class="lista-rodapé__titulo">Educação online</li>
            <li class="lista-rodapé__item">
                <img src="img/Alura.svg" alt="Logo da alura">
                <a href="#" class="lista-rodapé__link">Alura</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/AluraEmpresas.svg" alt="Logo da alura para empresas">
                <a href="#" class="lista-rodapé__link">Alura Para Empresa</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/AluraLATAM.svg" alt="Logo da alura latam">
                <a href="#" class="lista-rodapé__link">Alura Latam</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/AluraStart.svg" alt="Logo da alura start">
                <a href="#" class="lista-rodapé__link">Alura Start</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/MusicDot.svg" alt="Logo do musicdot">
                <a href="#" class="lista-rodapé__link">MusicDot</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/AluraLingua.svg" alt="Logo da alura Lingua">
                <a href="#" class="lista-rodapé__link">Alura Lígua</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/PM3.svg" alt="Logo do pm3">
                <a href="#" class="lista-rodapé__link">PM3</a>
            </li>
        </ul>
            <ul class="lista-rodapé">
            <li class="lista-rodapé__titulo">Cominidade</li>
            <li class="lista-rodapé__item">
                <img src="img/HipstersTech.svg" alt="Logo do hipsterstech">
                <a href="#" class="lista-rodapé__link">Hipsters ponto Tech</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/ScubaDev.svg" alt="Logo da scuba dev">
                <a href="#" class="lista-rodapé__link">Scuba Dev</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/LayersTech.svg" alt="Logo da Layers ponto Tech">
                <a href="#" class="lista-rodapé__link">Layers ponto Tech</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/LikeABoss.svg" alt="Logo da like a books">
                <a href="#" class="lista-rodapé__link">Like a Boss</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/CarreiraSemFronteira.svg" alt="Logo do carreira sem fronteira">
                <a href="#" class="lista-rodapé__link">Carreira sem Fronteira</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/HipstersJobs.svg" alt="Logo do hipsters para jobs">
                <a href="#" class="lista-rodapé__link">Hipsters ponto Jobs</a>
            </li>
            <li class="lista-rodapé__item">
                <img src="img/GUJ.svg" alt="Logo do guJ">
                <a href="#" class="lista-rodapé__link">GUJ</a>
            </li>
        </ul>
    </footer>

RODAPÉ.CSS

@media screen and (min-width: 1024px) {
    .rodapé {
        display: flex;
        justify-content: space-around;
    }

    .lista-rodapé {
        display: block;
    }
    
    .lista-rodapé__item {
        display: flex;
        align-items: center;
        margin: 0.6em 0;
    }

    .lista-rodapé__link {
        color: var(--cinza);
        text-decoration-line: none;
        margin-left: 0.6em;
    }

    .lista-rodapé__titulo {
        font-size: 14px;
        color: var(--cinza-claro);
    }

    .lista-rodapé__titulo {
        font-size: 24px;
    }
}