div.info {
    overflow:hidden;
    width: 100%;
    height: 100%;
    background-color: rgb(16 42 131 / 54%);
    opacity:0;
    transition: opacity 0.3s;
}

div.imagen:hover div.info {
    opacity:1;
}

p.headline {
    text-align: center;
    font-size: 1.2rem;
    color: white;
    position: relative;
    top: 40%;
    text-transform: uppercase;
    font-weight: bold;
}

p.descripcion {
    font-size: 1rem;
    text-align: center;
    margin-top: 110px;
    transition: margin-top 0.4s;
    color:white;
    position: relative;
}

div.imagen:hover p.descripcion {
    margin-top: 85px;
}

/*2*/
.flip-container {
    display: block;
}
.flip-container:hover .card {
    transform: rotateY(180deg);
}
.card, .front, .back {
    width:100%;
    height: 270px;
    object-fit: cover;
}
.card {
    transition: 0.5s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
}
.front {
    z-index: 1;
    transform: rotateY(180deg);
}
.back {
    z-index: 2;
    transform: rotateY(0deg);
}

.front_automotriz{
    background: linear-gradient(0deg, rgb(16 42 131), rgba(2,173,231,0.5)),  url(../images/sector/automotriz.jpg) top no-repeat,  url("../images/sector/automotriz.jpg") right no-repeat;
}
.back_automotriz{
    background: url("../images/sector/automotriz.jpg") right no-repeat;
}
.front_plastico{
    background: linear-gradient(0deg, rgb(16 42 131), rgba(2,173,231,0.5)),  url(../images/sector/plastico.jpg) right no-repeat,  url("../images/sector/automotriz.jpg") right no-repeat;
}
.back_plastico{
    background: url("../images/sector/plastico.jpg") center no-repeat;
}
.front_alimenticio{
    background: linear-gradient(0deg, rgb(16 42 131), rgba(2,173,231,0.5)),  url(../images/sector/alimenticio.jpg) center no-repeat,  url("../images/sector/automotriz.jpg") right no-repeat;
}
.back_alimenticio{
    background: url("../images/sector/alimenticio.jpg") bottom no-repeat;
}
.front_electromecanica{
    background: linear-gradient(0deg, rgb(16 42 131), rgba(2,173,231,0.5)),  url(../images/sector/electromecanica.jpg) top no-repeat,  url("../images/sector/automotriz.jpg") right no-repeat;
}
.back_electromecanica{
    background: url("../images/sector/electromecanica.jpg") center no-repeat;
}

@media only screen and (min-width: 300px) and (max-width: 720px) {
    .card, .front, .back {
        height: 110px !important;
    }
    p.headline {
        font-size: 11px;
        top: 40%;
    }
}