/**/
/** GALLERIA IMMAGINI PAGINE AMBIENTI **/
/**/

/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  column-gap: 1rem;
  column-fill: initial;
  max-width: calc(100vw - 12vw - 12vw);
  margin: 1.5rem auto;
}

/* Masonry item */
.masonry .brick {
  margin-bottom: 1rem;
  display: inline-block; /* Fix the misalignment of items */
  vertical-align: top; /* Keep the item on the very top */
  position: relative;
  line-height: 0;
}

/* Masonry image effects */
.masonry .brick img {
  transition: all .5s ease-in-out;
  backface-visibility: hidden; /* Remove Image flickering on hover */
}

.masonry .brick:hover img, .masonry .brick:active img {
  opacity: .75;
}

.masonry .brick::after, .masonry .brick:not(:active)::after {
  /* transition: all .5s ease-in-out; */
  content: '';
  background-color: #fff;
  background-image: none;
  width: 7rem;
  height: 0;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center center;
}

.masonry .brick:hover::after, .masonry .brick:active::after {
  animation: tab-fill 200ms ease-in-out;
  -webkit-animation: tab-fill 200ms ease-in-out;
  -moz-animation: tab-fill 200ms ease-in-out;
  content: '';
  background-color: #fff;  
  width: 7rem;
  height: 3rem;
  display: block;
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background-size: auto 1.25rem;
  background-repeat: no-repeat;
  background-position: center center;
}

.masonry .nologo.brick:hover::after, .masonry .nologo.brick:active::after {
  background-color: transparent;
}

.masonry .abk.brick:hover::after, .masonry .abk.brick:active::after {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-abk-1.png");
}
.masonry .berti.brick:hover::after, .masonry .berti.brick:active::after  {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-berti-1.png");
}
.masonry .bisazza.brick:hover::after, .masonry .bisazza.brick:active::after {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-bisazza-1.png");
}
.masonry .blustyle.brick:hover::after, .masonry .blustyle.brick:active::after {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-blustyle-1.png");
}
.masonry .cotto-este.brick:hover::after, .masonry .cotto-este.brick:active::after {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-cotto-este-1.png");
  background-size: auto 1rem;
}
.masonry .flaviker.brick:hover::after, .masonry .flaviker.brick:active::after {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-flaviker-1.png");
}
.masonry .gardenia.brick:hover::after, .masonry .gardenia.brick:active::after {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-gardenia-1.png");
}
.masonry .versace.brick:hover::after, .masonry .versace.brick:active::after {
  background-image: url("/wp-content/uploads/2024/05/edilferrarese-logo-versace-1.png");
}

/* Masonry on tablets */
@media only screen and (max-width: 1023px) {
  .masonry {
    column-count: 2;
  }
}

/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 3;
  }
}

/* Masonry on bigger screens */
@media only screen and (min-width: 1440px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 4;
  }
}

/* Masonry on smartphones */
@media only screen and ( max-width: 768px ) {
  .masonry {
    max-width: calc(100vw - 5vw - 5vw);
  }
  .masonry .brick {
    margin-bottom: 1rem;
  }
  .masonry .brick a::before {
    content: '';
    background-image: url("/wp-content/uploads/2024/05/magnifying-glass-plus-bianco.svg");
    width: 2rem;
    height: 2rem;
    position: absolute;
    background-repeat: no-repeat;
    bottom: 0.5rem;
    right: 0.5rem;
    display: block;
    opacity: 1;
    z-index: 50;
  }
  /* .masonry .brick:hover::before {
    animation: tab-fill 200ms ease-in-out;
    -webkit-animation: tab-fill 200ms ease-in-out;
    -moz-animation: tab-fill 200ms ease-in-out;
    content: '';
    background-image: url("/wp-content/uploads/2024/05/magnifying-glass-plus-bianco.svg");
    width: 15re;  
    height: 5rem;
  } */
}

@-webkit-keyframes tab-fill {
  0% {
    width: 7rem;
    height: 0;
    background-image: none;
    opacity: 0;
  }
  33% {
    width: 7rem;
    height: 1.5rem;
    background-image: none; 
    opacity: 0.2;
  }
  40% {
    width: 7rem;
    height: 2rem;
    background-image: none;
    opacity: 0.3;
  }
  100% {
    width: 7rem;
    height: 3rem;
    opacity: 1;
  }