Ajustando a animação :hover para interação com dispositivos móveis

Você encontrou um problema em que a animação CSS :hover, que expande um painel, não é acionada em dispositivos móveis dispositivos devido à ausência de pairar o mouse. Para resolver isso, você pretende mudar o gatilho para 'clique' ou 'toque' quando a largura da página estiver abaixo de 700px.

Para conseguir isso, você pode utilizar uma combinação de seletores :hover e :active. Ao ordenar os seletores com :active após :hover em seu CSS, você pode garantir que ações de toque ou clique em seu painel também acionarão a animação. Aqui está o CSS atualizado:

.info-slide:hover, .info-slide:active {
  height: 300px;
}

Essa alteração garante que o painel se expandirá ao passar o mouse ou tocar em computadores e dispositivos móveis. Para verificar sua funcionalidade, é recomendável testá-lo em um ambiente móvel real, pois os simuladores podem não fornecer resultados precisos.