.masonry{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;

  &__box{
    position: relative;
    height: 500px;

    &--overlay{
      bottom: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0, 0.5);
      transition: all 0.25s ease-in-out;
      cursor: pointer;
      text-align: center;
      padding: 0 20px;

      p{
        color: white;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.25s ease-in-out 0.25s;
      }

      opacity: 0;
      height: 0;    
    }

    &:hover{
      .masonry__box--overlay{
        opacity: 1;
        height: 100%;
      }
      p{
        opacity: 1;
        transform: translateY(0px);
      }
    }

    @media(max-width: 1500px){
      height: 300px;
    }

    @media(max-width: 768px){
      height: 200px;
    }

    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &:nth-child(5n+1){
      width:37%;
      margin-right: 3%;
      margin-top: 3%;
    }
    &:nth-child(5n+2){
      width: 60%;
      margin-top: 3%;
    }
    &:nth-child(5n+3){
      width:37%;
      margin-right: 3%;
      margin-top: 3%;
    }
    &:nth-child(5n+4){
      width:28.5%;
      margin-right: 3%;
      margin-top: 3%;
    }
    &:nth-child(5n+5){
      width:28.5%;
      margin-top: 3%;
    }
  }
}