/* ---- masonry ---- */

.masonry {
  position: relative;
  max-width: 1200px;
  box-sizing: border-box;
}

/* clearfix */
.masonry:after {
  content: '';
  display: block;
  clear: both;
  box-sizing: border-box;
}

/* ---- masonry-item ---- */
.masonry-sizer,
.masonry-item {width: 25%;}


.masonry-sizer {color:transparent; opacity:0;}
.masonry-item {
  height: 250px;
  float: left;
  overflow:hidden;
  box-sizing: border-box;
  padding:15px;
}

.masonry-item-width2 { width:  50%; }
.masonry-item-width3 { width:  75%; }
.masonry-item-height2 { height: 500px; }

/* masonry image & title */
.masonry-item > img {position:absolute;
    top:0; left:0;
    z-index:1;
    padding:5px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

.masonry-item > h3 {display: flex;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    position: relative;
    z-index: 2;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin:0 auto;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
    padding:0 15px;
  }
.masonry-item:hover {cursor:pointer;}
.masonry-item:hover h3 {background-color: rgba(0,0,0,.2);}
.masonry-item h3 a,
.masonry-item:hover h3 a {color:#ffffff;}

/* masonry style two */
.masonry-style2 .masonry-item {padding:5px;}
.masonry-style2 .masonry-item > * {border-radius:10px;}
.masonry-style2 .masonry-item > h3 {border:0; font-size: 30px; font-weight: 500;  background:linear-gradient(0deg, rgba(66, 55, 36, 0.4), rgba(66, 55, 36, 0.4));}
.masonry-style2 .masonry-item:hover > h3 {background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));}

.masonry-style2 .masonry-item h3 a:after {
    content: '...';
    display: inline-block;
    position: absolute;
    bottom: 15px;
    right: 15px;}

/* mobile view */
@media only screen and (max-width:767px){
.masonry-item {
    position: relative!important;
    width: 100%!important;
    left: 0!important;
    top: 0!important;}
}

/*
@media only screen and (min-width:768px){
  .masonry-item > span {opacity:0;}
  .masonry-item:hover > span {opacity: 1;}
}
*/