I have a dynamic photo list, pulled from the CMS. Photos are vertical and horizontal. I am trying to create a "dynamic grid" where all horizontal photos are 100% wide and vertical photos are 50% wide. I was able to achieve this with the help of JS. codepen with my code

However, I have trouble targeting the last odd vertical shot that has a horizontal shot in front of it. I would like this photo to be 100% wide as well, so that there would be no unnecessary break.

I tried to use :nth-child() pseudo class but, that was not helpful at all. - its select only first child.

.wide + .portfolio-item:nth-last-child(odd) {
  width: 100%;
}