
body {
    margin: 0;
    padding: 0; /*quitar los margenes exteriores*/
  }

h1{
  text-align: center;
  width: 100%;
  font-size: 2.5em;
  padding-top: 10vh;
  color: #f09f07;
    text-transform: uppercase;
}

.entrada_instalaciones{
  padding-top: 5vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  overflow: hidden;
}

  .entrada_instalaciones h2{
    padding-bottom: 3vh;
  }

  .grid_instalaciones{
      display: grid;
      grid-template-columns: 30% 30% 30%;
      justify-content: space-around;
      width: 80%; /*contenido centrado*/
  }

  .grid {
    display: grid;
    grid-template-rows: 80% 20%;
    align-items: center;
    justify-content: center;
      margin: 1vh 0vw;
  }

  .cuadricula{
      width: 25vw;
      height: 30vh;
      overflow: hidden;
      margin: auto;
        border: 2px solid #f09f07;
      /*las imagenes tienen relacion de aspecto 1200x800*/
  }

  .cuadricula img{
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

/* .cuadricula:hover{
    -webkit-transform:scale(0.9);transform:scale(0.9);
    transition: 0.8s;
} */

    .grid h4{
      height: 100%;
      width: 100%;
      padding-top: 2vh;
    }


  @media screen and (max-width: 900px){ /*min-width */

    .grid_instalaciones{
        grid-template-columns: 50% 50%;
        width: 90%;
    }

    .grid{
      align-items: center;
      justify-content: center;
    }

    .cuadricula{
        width: 40vw;
        height: 40vh;
    }

    .entrada_instalaciones h2{
      padding-bottom: 1vh;
    }

    .cuadricula:hover{}
}

  @media screen and (max-width: 650px){ /*min-width */
    .grid_instalaciones{
        grid-template-columns: 50% 50%;
        width: 100%;
    }

    .cuadricula{
        width: 40vw;
        height: 27vh;
    }

    .entrada_instalaciones h2{
        padding-bottom: 1vh;
        font-size: 1em;
        width: 90%;
    }

    h1{
      font-size: 1em;
    }

    h4{
      font-size: 0.9em;
    }
    

  }

  @media screen and (max-width: 350px){ /*min-width */


    h4{
      font-size: 0.7em;
    }
    

  }

