Problemas com :hover modificando o fluxo da pagina.

Quando eu aplico o estilo de hover no blockquote, o parametro do float que eu apliquei para de funcionar apenas na segunda classe (.citacao-bio:nth-of-type(even)), ao invez do texto ficar alinhado ao lado, ele vai para baixo da "caixa". Nao conseguir saber o porque.

.citacao-bio {
    background-color: #D9E5E3;
    border: .5em solid #C2CCCA;
    padding: 1em;
    margin: 1em 2em;
    width: 30ch;
    box-sizing: border-box;
}

.citacao-bio:nth-of-type(even),{
    float: left;
    margin-left: 0;

}

.citacao-bio:nth-of-type(odd) {
    float: right;
    margin-right: 0;
}

.citacao-bio:hover {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.8);
}

.citacao-bio:nth-of-type(even):hover {
  transform: scale(1.2) rotate(-5deg);
}

.citacao-bio:nth-of-type(odd):hover {
  transform: scale(1.2) rotate(5deg);
}