Newbie needs CSS code for changing aspect ratio on photos across multiple product pages

I've have read a thread regarding photo aspect ratio alterations across different product pages, for example, I'm a photographer, half of my photos are meant to be seen 4:3 horizontal and some need to be 3:4 vertical. I have made two separate pages which is ridiculous to me but they still look the same across the whole website. I need control. I tried using the code 

<style>
  .tweak-product-item-gallery-aspect-ratio-11-square .ProductItem-gallery-slides:before {
    padding-bottom: 130% !important;
}
</style>

 that I grabbed off another thread here, pasted it into the "header" area but it did not work. Help? I don't really understand the CSS shorthand directions other than GO HERE < THEN HERE < ETC > ETC ...please help! What I would truly like is for ALL my photos to be displayed correctly on ONE PRODUCT PAGE having the photos at differing aspect ratios...is that possible too?  🙂 Mahalo

Can you share the website please?

Often CSS will be case dependent and it's not going to be a quick fix without us seeing the actual site live.

You can add a password to it if it's not live yet.

Here is an example of the page that needs to be 4:3 Vertical. https://www.photoartbydavo.com/vertical-photos Also each product needs to be displayed as 4:3 on the product page itself. Currently, the entire site uses 4:3 horizontal. Ugh..Thanks..:)

On 2/4/2022 at 10:55 PM, DavoTheDirector said:

Here is an example of the page that needs to be 4:3 Vertical. https://www.photoartbydavo.com/vertical-photos Also each product needs to be displayed as 4:3 on the product page itself. Currently, the entire site uses 4:3 horizontal. Ugh..Thanks..:)

Which page you want 3:4?