/* ============================================
   AVANTCHA THEME 3.0
   Custom Module: Masonry Gallery
============================================ */

.masonry-grid-item {position: relative;display: flex;justify-content: center;align-items: flex-end;overflow: hidden;padding: 0px;margin-top: 0px;}
.masonry-grid-item a {height: 100%;width:100%;display:block;}

.masonry-grid-item-image {position: relative;height: 100%;width:100%;}
.masonry-grid-item-image img {width: 100%;height: 100%;object-fit: cover;transition: transform var(--speed-slow) ease-out;}
.masonry-grid-item a:hover img {transform:scale(1.1)}

.masonry-grid-item-content-container {position: absolute;bottom: 30px;
   left: 50%;width: 100%;transform: translateX(-50%);display: grid;justify-items: center;}

h4.masonry-grid-item-text {transition: all var(--speed-slow) ease-out;max-width:90%;font-family: var(--font-family-sans);
      text-transform: uppercase;font-weight: var(--font-weight-medium);
      padding: var(--button-padding);margin-bottom:0;border: 0;text-align: center;background-color: white;color: var(--color-body);font-size: var(--font-size-r);
}

.masonry-grid-item a:hover h4 {background-color: var(--color-button-dark-bg);color: white;}
.masonry-grid-item-description {
   background-color: white;width: 70%;
   text-align: center;padding: var(--size-12);transition: all var(--speed-slow) ease-out;
}
.masonry-grid-item a:hover .masonry-grid-item-description {background-color: var(--color-button-dark-bg);
   color: white;}

.style-2 .masonry-grid-item-image {overflow:hidden;}
.style-2 .masonry-grid-item-image, .style-2 .masonry-grid-item-image img {height:auto;display:block;}
.style-2 .masonry-grid-item-content-container {background-color: transparent;position:static;margin-top: var(--size-24);transform: initial;}
.style-2 h4.masonry-grid-item-text {background-color: transparent;
   font-family: var(--font-family-serif);text-transform: capitalize;font-size: var(--font-size-h4);padding: 0;}
.style-2 a:hover h4 {color:var(--color-body);background-color: transparent;}
.style-2 .masonry-grid-item-description {background-color: transparent;padding: 0;margin-top: var(--size-12);transition: all var(--speed-slow) ease-out;}
.style-2 a.hover .masonry-grid-item-description {background-color: transparent;}

.style-3 .masonry-grid-item-image {
   overflow: hidden;
}

.style-3 a {display:block;}

.style-3 .masonry-grid-item-content-container {   
   top:50%;transform: translate(-50%, -50%);opacity:0;z-index:5;
   transition: all var(--speed-fast) ease-out;
  justify-content: flex-start;justify-items: center;align-items: center;align-content: center;width:100%;
}
.style-3 a::before {content:"";
   background-color: rgba(0, 0, 0, 0.25);width: 100%;height: 100%;
   position: absolute;top: 0;left: 0;display: block;z-index: 2;opacity:0;transition: all var(--speed-fast) ease-out;
}
.style-3 h4.masonry-grid-item-text {
   background-color: transparent;font-family: var(--font-family-serif);
   text-transform: capitalize;font-size: var(--font-size-h3);padding: 0;color:white;text-shadow:1px 2px 8px rgba(0, 0, 0, 0.5);width:100%;
}
.style-3 article:hover .masonry-grid-item-content-container {
   opacity: 1;
}
.style-3 article:hover a::before, .style-3 a:hover a::before {opacity:1;}
.style-3 a:hover h4 {   
   background-color: transparent;
}

.style-3 .masonry-grid-item-description {
   background-color: transparent;
   padding: 0;
   margin-top: var(--size-12);
   transition: all var(--speed-slow) ease-out;
   color:white;
   width:90%;
   font-weight:var(--font-weight-light);
}

.style-3 a:hover .masonry-grid-item-description {
   background-color: transparent;
}

.grid-item-height-auto, .style-2 .grid-item-height-small,
.style-2 .grid-item-height-medium,
.style-2 .grid-item-height-high {height:auto;}
.grid-item-height-small {height:350px;}
.grid-item-height-medium {height:400px;}
.grid-item-height-large {height:450px;}
.grid-item-height-x-large {height: 500px;}
.grid-item-height-xx-large {height: 550px;}


@media (max-width:1024px) {
   h4.masonry-grid-item-text {padding:var(--padding-xy-xs)};
}

@media (max-width:767px) {
   .masonry-gallery-scroller {overflow-x: auto;}
   .masonry-gallery-scroller .masonry-grid-item {min-width: 300px;grid-column: unset;grid-row: 1;}
   
   .grid-item-height-small {height: 300px;}
   .grid-item-height-medium {height: 350px;}
   .grid-item-height-large {height: 400px;}
   .grid-item-height-x-large {height: 450px;}
   .grid-item-height-xx-large {height: 500px;}

   .grid-item-mobile-height-small {height: 300px;}
   .grid-item-mobile-height-medium {height: 350px;}
   .grid-item-mobile-height-large {height: 400px;}
   .grid-item-mobile-height-x-large {height: 450px;}
   .grid-item-mobile-height-xx-large {height: 500px;}

   .style-3 .masonry-grid-item-content-container, .style-3 article a::before,
   .style-3 a a::before {opacity:1;}    
}