[Bug] Card quebrou após implementar footer

import './Footer.css';

const Footer = () => {
    return (
        <footer className="footer">
            <section>
                <ul>
                    <li>
                        <a href="facebook.com" target="_blank">
                            <img src="/images/fb.png" alt="Facebook"/>
                        </a>
                    </li>
                    <li>
                        <a href="twitter.com" target="_blank">
                            <img src="/images/tw.png" alt="Twitter"/>
                        </a>
                    </li>
                    <li>
                        <a href="instagram.com" target="_blank">
                            <img src="/images/ig.png" alt="Instagram"/>
                        </a>
                    </li>
                </ul>
            </section>
            <section>
                <img src="/images/logo.png" alt="Logo da Organo" />
            </section>
            <section>
                <p>
                    Desenvolvido por Alura.
                </p>
            </section>
        </footer>
    )
}

export default Footer;

.footer {
    background: #6278F7;
    color: #FFF;
    padding: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer ul li {
    display: inline-block;
    margin-right: 32px;
}

.footer ul li:last-child {
    margin-right: 0;
}

import { useState } from 'react';
import Banner from './components/Banner';
import Form from './components/Form';
import Team from './components/Team';
import Footer from './components/Footer';

function App() {

  const teams = [
    {
      name: 'Back-End',
      primaryColor: '#57C278',
      secondaryColor: '#D9F7E9'
    },
    {
      name: 'Front-End',
      primaryColor: '#82CFFA',
      secondaryColor: '#E8F8FF'
    },
    {
      name: 'Data Science',
      primaryColor: '#A6D157',
      secondaryColor: '#F0F8E2'
    },
    {
      name: 'DevOps',
      primaryColor: '#E06B6B',
      secondaryColor: '#FDE7E8'
    },
    {
      name: 'UX/UI',
      primaryColor: '#DB6EBF',
      secondaryColor: '#FAE9F5'
    },
    {
      name: 'Mobile',
      primaryColor: '#FFBA05',
      secondaryColor: '#FFF5D9'
    },
    {
      name: 'Inovação e Gestão',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFEEDF'
    },
    {
      name: 'Design',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFE5D9'
    },
    {
      name: 'Segurança',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFE5D9'
    },
    {
      name: 'Marketing',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFE5D9'
    },
    {
      name: 'Vendas',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFE5D9'
    },
    {
      name: 'Suporte',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFE5D9'
    },
    {
      name: 'Engenharia',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFE5D9'
    },
    {
      name: 'Outros',
      primaryColor: '#FF8A29',
      secondaryColor: '#FFE5D9'
    }
  ]

  const [collaborators, setCollaborators] = useState(['']);

  const onNewCollaboratorAdd = (collaborator) => {
    console.log(collaborator)
    setCollaborators([...collaborators, collaborator]);
  }

  return (
    <div className="App">
      <Banner/>
      <Form teams={teams.map(team => team.name)} onCollaboratorRegistered={collaborator => onNewCollaboratorAdd(collaborator)}/>

      {teams.map(team => <Team 
        key={team.name} 
        name={team.name} 
        primaryColor={team.primaryColor} 
        secondaryColor={team.secondaryColor}
        collaborators={collaborators.filter(collaborator => collaborator.team === team.name)}
      />)}

      <Footer/>
    </div>
  );
}

export default App;