Portfolio Grid Item Selector & nth child???

I'm trying to use the nth child selector to change the padding on the bottom of certain items on the portfolio grid so it's not all so uniform. I can get it to change all of them but I can't seem to get the nth child selector to work to just target certain ones. Any ideas?

https://collie-sawfish-km3y.squarespace.com/

PW: brineintopedro

You are probably having a specificity issue.

.tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-item:nth-child( 2 ) {

  padding-bottom : 150%;
  
  }

Are you trying to achieve a masonry effect?

3 hours ago, creedon said:

You are probably having a specificity issue.

.tweak-portfolio-grid-overlay-image-aspect-ratio-34-three-four-vertical .portfolio-grid-overlay .grid-item:nth-child( 2 ) {

  padding-bottom : 150%;
  
  }

Are you trying to achieve a masonry effect?

Thanks! Unfortunately, this only effects the overlay on hover. Not quite a masonry effect--I wanted to have several different heights within a row. 

Right the ruleset was meant to show how the selector would look not implement the actual effect.

With grid, currently, I know of no way to create a masonry effect. When you change one item in a row, the whole row changes height.

You might find Approaches for a CSS Masonry Layout of interest.

It might be possible to use JavaScript to restructure the HTML into a masonry effect but might have the downside of losing some of SS built-in features of the grid.