.main-container {
  display: flex;
  height: calc(100vh - 104px);
}

/* --- TABLET/SMARTPHONE (vertical - portrait) --- */
@media (max-width: 1024px) and (orientation: portrait) {
  .main-container {
    flex-direction: column;
  }

  .categories-panel {
    flex: 1;
    width: 100%;
  }

  .entities-panel {
    display: none; /* invisível no portrait */
    width: 100%;
  }

  /* Quando o usuário escolher categoria, você pode usar uma classe .show-entities no body */
  body.show-entities .categories-panel {
    display: none; /* esconde categorias */
  }

  body.show-entities .entities-panel {
    display: block; /* mostra entidades */
  }
}

/* --- TABLET/SMARTPHONE (horizontal - landscape) --- */
@media (max-width: 1024px) and (orientation: landscape) {
  .main-container {
    flex-direction: row;
  }

  .categories-panel {
    flex: 0 0 40%; /* pode ocupar um pouco mais em telas menores */
  }

  .entities-panel {
    flex: 1;
    display: block; /* sempre visível */
  }
}