Masonary Grid - caption on hover, bottom left corner

Hi

I am trying to achieve this caption hover look that appears on this website (https://hunterand.co/projects/) in my squarespace site. I am using the masonry grid. I have managed to get the caption to overlay but i can't get it to move to the bottom left.

I have tried changing the below 
  align-items: center;
  justify-content: center;

to
  align-items: bottom;
  justify-content: left;

but it doesn't work. I would also love if i could somehow have my captions over multiple lines if at all possible.
It would also be good if the caption was clickable to the link and not just the surrounding image.

Any help would be gratefully appreciated!

This is my currant code below:

.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: bottom;
  color: #fff;
  height: 100%;
  max-width: 100vw;
  padding: 0;
}
.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before {
    background-color: rgba(0,0,0,.4);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .5s
}
.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
    z-index: 999999;
    opacity: 1;
    height: auto;
}
.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
}
.gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before {
    opacity: 1;
    transition: all .5s
}
.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  
}
.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.3em;
  font-weight: 400;
  margin: 2vh 2vw;
}
.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  }
}

Also for some reason when i went back into my site the overlay grey background had disappeared/stoped working. Not sure why this happened.

Can you share link to page where you use masonry? We can check easier