Básicamente lo que intento hacer es colocar este h2: <h2> Entrenamientos online intensivos, prácticos y de corta duración. </h2>
como un título centrado al comienzo del section pero cuando lo coloco se posiciona a la izquierda o me rompe las cards de abajo y lo toma como columna en lugar de fila que es lo que quiero.
Les dejo el detalle de mi código html y css donde si bien no aparece el h2 quisiera saber dónde debería colocarlo.
/*-----------------Cards cursos------------*/
.cardCursos{
background-image: url(../img/bckcursos.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
height: 100vh;
width: 100%;
}
.fnd{
background-color: #4489a8;
z-index: 0;
width: 100%;
position: absolute;
opacity: .75;
height: 100vh;
left: 0;
}
.cardForma{
height: 100vh;
padding: 0 4em;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
z-index: 10;
}
.undiv{
perspective: 1000px;
height: 28vh;
width: 100%;
cursor: pointer;
margin: 10px;
}
.cardFront{
transform-style: preserve-3d;
height: 100%;
width: 100%;
transition: 0.5s ease;
}
.front,.cardBack{
height: 100%;
width: 100%;
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.4em;
position: absolute;
top: 0;
bottom: 0;
backface-visibility: hidden;
}
.front{
background: #ffffff;
}
.front img{
width: 80px;
height: 80px;
}
.cardBack{
background-color: #2e2b3f;
transform: rotateX(180deg);
}
.front h3{
color: #2e2b3f;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
}
.contentC{
transform: translateZ(60px);
}
.contentC h3{
margin-top: 1em;
}
.contentC p{
font-size: 14px;
line-height: 2em;
letter-spacing: 0.02em;
padding: 0 3em;
}
.undiv:hover .cardFront{
transform: rotateX(180deg);
}
/*-----------------Fin de Cursos------------*/
@media screen and (min-width: 992px) {
.cardCursos{
padding: 0 1em;
}
.undiv{
flex-basis: 0 0 25%;
max-width: 25%;
padding: 0 1em;
}
}
@media (max-width: 1440px){
.cardForma{
flex-wrap: nowrap;
}
}
<section>
<div class="cardCursos">
<div class="fnd"></div>
<div class="cardForma">
<div class="undiv">
<div class="cardFront">
<div class="front">
<div class="contentC">
<img src="../img/1.png" alt="">
<h3>100% remoto</h3>
</div>
</div>
<div class="cardBack">
<div class="contentC">
<p>Podés acceder a la plataforma desde tu compu o celular desde donde te
encuentres.</p>
</div>
</div>
</div>
</div>
<div class="undiv">
<div class="cardFront">
<div class="front">
<div class="contentC">
<img src="../img/2.png" alt="">
<h3>Desarrollo de habilidades</h3>
</div>
</div>
<div class="cardBack">
<div class="contentC">
<p>Buscamos simular los espacios de trabajo lo más real posible.</p>
</div>
</div>
</div>
</div>
<div class="undiv">
<div class="cardFront">
<div class="front">
<div class="contentC">
<img src="../img/3.png" alt="">
<h3>Entrenamiento por cohorte</h3>
</div>
</div>
<div class="cardBack">
<div class="contentC">
<p>Grupos limitados con espacios de intercambio.</p>
</div>
</div>
</div>
</div>
<div class="undiv">
<div class="cardFront">
<div class="front">
<div class="contentC">
<img src="../img/4.png" alt="">
<h3>Comunidad de pares</h3>
</div>
</div>
<div class="cardBack">
<div class="contentC">
<p>Forma parte de una comunidad compuesta por mentores, profesionales y
compañeros.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>