/**
 * Titulo y categorias del listado de portafolio en movil.
 *
 * El tema pone los dos en la misma fila con `justify-content: space-between` y
 * sin separacion ninguna:
 *
 *   @media (max-width: 570px)
 *   .pe--portfolio.portfolio--list > div.portfolio--projects--wrapper
 *       .project--details > div.project--tc { flex-direction: row; ... }
 *
 * Con un titulo corto se aguanta, pero "MDT Ingenieros" ocupa 158px y sus
 * categorias 212px de los 370 disponibles: quedan pegados, y ambos partidos en
 * dos lineas que se entrelazan. En el modo Grid pasa lo mismo y ademas en
 * cualquier ancho, porque su regla no lleva media query.
 *
 * En escritorio ya van apilados, asi que esto solo iguala el movil. Los
 * selectores repiten la especificidad del tema (5 clases + 2 etiquetas en el
 * modo lista) porque con menos la regla no gana.
 */
@media only screen and (max-width: 767px) {

	.pe--portfolio.portfolio--list > div.portfolio--projects--wrapper .project--details > div.project--tc,
	.pe--portfolio.portfolio--grid .project--tc {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		row-gap: 3px;
	}

	.pe--portfolio.portfolio--list .project--title,
	.pe--portfolio.portfolio--grid .project--title {
		line-height: 1.2;
	}

	.pe--portfolio.portfolio--list .project--cat,
	.pe--portfolio.portfolio--grid .project--cat {
		line-height: 1.35;
	}
}