&:hover

Olá, Leonardo, como vai?

O & (parent selector) é uma forma de referenciar o próprio seletor dentro de uma regra aninhada. Por exemplo, ao usar &:hover no componente Resultado:

const Resultado = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    cursor: pointer;

    p {
        width: 200px;
    }

    img {
        width: 100px;
    }

    &:hover {
        border: 1px solid white;
    }
`

Nesse caso, o hover é aplicado ao mesmo elemento que o seletor está referenciando, que é a própria div. Isso facilita a organização e a estruturação de estilos aninhados.

Temos um curso de SASS onde falamos mais sobre o parent selector caso tenha interesse :)

Espero ter ajudado. Conte sempre com o fórum quando precisar e siga firme nos seus estudos!

Abraços!