[Solução] Header versão Styled Components

Optei por construir o cabecalho através do Styled Components pois eu já fiz outros cursos da Alura com o React usando o css modules, então optei por variar na construção do meu css.

E até que não foi tão trabalhoso assim pra fazer, e o resultado ficou bem satisfatório:

index.tsx do Header:

import styled from "styled-components";

const Cabecalho = styled.header`
  display: flex;
  justify-content: space-around;
  padding-top: 120px;
  .logo {
    background-image: url("/imagens/logo.png");
    width: 351px;
    height: 117px;
  }
  .participante {
    width: 450px;
    height: 277px;
    z-index: 1;
  }
  @media screen and (max-width: 800px) {
    padding-top: 60px;
    flex-direction: column;
    align-items: center;
    .logo {
      background-image: url("/imagens/logo-pequeno.png");
      width: 235px;
      height: 199px;
    }
    .participante {
      width: 328px;
      height: 158px;
    }
  }
`;

export const Header = () => {
  return (
    <Cabecalho>
      <div className="logo" role="img" aria-label="Logo do site Sorteador de Amigo Secreto"></div>
      <img className="participante" src="/imagens/participante.png" alt="Particpante com roupa vermelha e com o presente na mão" />
    </Cabecalho>
  )
}

Lembrando sempre que qualquer sugestão de melhora é sempre bem-vindo!