/* ===========================
   CONTENEDOR GENERAL
=========================== */

.info-aeribac{
    width:100%;
    padding:80px 5%;
    background:#f5f7fa;
    display:grid;
    grid-template-columns:
        1fr
        1fr
        1.2fr;
    grid-template-areas:
        "mision vision imagen"
        "objetivo objetivo imagen";
    gap:30px;
}

/* ===========================
   AREAS
=========================== */

.mision{
    grid-area:mision;
}

.vision{
    grid-area:vision;
}

.objetivo{
    grid-area:objetivo;
}

.imagen{
    grid-area:imagen;
}

/* ===========================
   TARJETAS
=========================== */

.card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.4s;
	opacity:1;
	transform:none;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/* ===========================
   TITULOS
=========================== */

.titulo{

    background:linear-gradient(
        135deg,
        #FF7F2A,
        #FF9A4D
    );

    color:#fff;
    font-size:4vh;
    font-weight:700;
	font-family:Calibri;

    padding:18px 25px;

    position:relative;
}

.titulo::after{

    content:"";

    position:absolute;

    bottom:10px;
    left:25px;

    width:70px;
    height:3px;

    background:rgba(255,255,255,.8);

    border-radius:10px;
}

/* ===========================
   CONTENIDO
=========================== */

.contenido{

    padding:30px;
    color:#444444;
    font-size:3.0vh;
	font-family:Calibri;
    line-height:1.8;

    opacity:1;

    visibility:visible;
}

/* ===========================
   IMAGEN
=========================== */

.imagen{
    border-radius:20px;
    overflow:hidden;
    box-shadow:
        0 15px 35px rgba(0,0,0,.08);
}

.imagen img{

    width:80%;
    height:auto;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;
}

.imagen:hover img{

    transform:scale(1.08);
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:900px){

    .info-aeribac{

        grid-template-columns:1fr;

        grid-template-areas:

            "mision"
            "vision"
            "objetivo"
            "imagen";
    }
	.contenido{font-size:2.0vh;}
    .imagen{

        min-height:350px;
    }
}