/********************** proyectoBase CSS *************************/
.grid {
  max-width: 1200px;
  padding: 50px 0;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 32%;
}

.gutter-sizer {
  width: 2%;
}

.grid-item {
  height: 300px;
  float: left;
  margin-bottom: 20px;
}

.grid-item--width2 { width:  66%; }

.grid-item--height2 { height: 320px; }
.grid-item--height3 { height: 340px; }
.grid-item--height4 { height: 360px; }

.grid-item-img {
  height: 100%;
}
.grid-item-img:hover {
  filter: grayscale(1) opacity(0.7);
}
.filterImg {
  position: absolute;
  height:50%; 
  background: linear-gradient(180deg,rgba(0,0,0,0.7),transparent); 
  z-index: 2; 
  width: 100%;
}

/************* CSS PQ *************/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .grid-item--width2 {width: 66%;}
}
/************** CSS Tablet *****************/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mainMasOnry .container { max-width: 760px;}
    .grid-item--width2 {width: 100%;}
    .grid-item {height: 236px;}
}

/************* CSS Smartphone xl *************/
@media only screen and (min-width: 550px) and (max-width: 767px) {
    .mainMasOnry .container {max-width: 540px;}
    .grid-sizer, .grid-item {width: 49%;}
    .gutter-sizer {width: 2%;}
    .grid-item {height: 256px;margin-bottom: 5px;}
    .grid-item--width2 { width: 100%;}
}
/************ CSS Smartphone ****************/
@media only screen and (max-width: 549px) {
    .mainMasOnry .container {max-width: 310px;}
    .grid {padding: 20px 0;}
    .grid-sizer, .grid-item {width: 100%;}
    .grid-item {height: 287px;}
    .grid-item--width2 {
      position: absolute;
      width: 100%;
      left: 0%;
      overflow: hidden;
    }
    .grid-item--width2 .img-viaj.grid-item-img {
      position: absolute;
      left: -50%;
      width: 590px;
      max-height: 287px;
    }
}