Faça como eu fiz: estilizando o rodapé e aplicando responsividade

Exercício um) Crie e estilize o rodapé, garantindo que os ícones e elementos estejam alinhados e centralizados

.rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-xxl);
}

.rodape-bg {
    background-color: var(--cor-neutra-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icones-rodape {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--gap-s);
}

.icone-rodape {
    margin-right: 0.5rem;
}

Exercício dois) Aplique a pseudo-classe :last-child para remover a margem do último ícone no rodapé.

.icone-rodape {
    margin-right: 0.5rem;

    &:last-child {
        margin-right: 0;
    }
}

Exercício três) Use media queries para tornar a página responsiva, adaptando os estilos para telas menores.

.rodape-bg {
    background-color: var(--cor-neutra-light);
    display: flex;
    justify-content: space-between;
    align-items: center;

    @media (max-width: 768px) {
        flex-direction: column;
        gap: var(--gap-m);
    }
}

.icones-rodape {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--gap-s);

    @media (max-width: 768px) {
       align-items: center;
    }
}