Desafio: construindo páginas

Estou usando styled-components

codigo pagina favoritos

import Banner from "../../componentes/Banner";
import Titulo from "../../componentes/Titulo";
import Card from "../../componentes/Card";
import ContainerCards from "../../componentes/ContainerCards";

const videos = [
  {
    "id": 1,
    "titulo": "O labirinto do Logcat",
    "capa": "https://caelum-online-public.s3.amazonaws.com/2802-react-praticando/img2.png",
    "link": "https://www.youtube.com/embed/ypvGqZGJBls"
  },
  {
    "id": 2,
    "titulo": "Um componente no espaço",
    "capa": "https://caelum-online-public.s3.amazonaws.com/2802-react-praticando/img1.png",
    "link": "https://www.youtube.com/embed/jK0uiQ1ZQQQ"
  }
]

const Favoritos = () => {
  return (
    <>
      <Banner imagem={'favoritos'}/>
      <Titulo>
        <h1>Meus favoritos!</h1>
      </Titulo>
      <ContainerCards>
        {videos.map(video => <Card id={video.id} titulo={video.titulo} capa={video.capa} key={video.id}/>)}
      </ContainerCards>
    </>
  )
}

export default Favoritos;

Codigo componente ContainerCards

import {styled} from "styled-components";

const ContainerCards = styled.section`
    display: flex;
    justify-content: space-around;

`

export default ContainerCards;