A few questions about alternate templates, and how to find actual file paths using Chrome Dev Tools

[TWBF]

Greetings Shopify People!!!

I am working on a site - that is currently in draft mode, so I can't share the actual links.
It is an Online Store 2.0 theme. You can see the current stable version of the site HERE. (if helpful?)

The crux of my issue is this. I want images on my collections page to be cropped differently based on products. We have our main product - Wood Baseball Bats (I want this item cropped to 150px) , and then everything else (novelties, apparel, etc. - which I'd like cropped at 500px). The cropping is controlled through the .css

#same_product_height #tt-pageContent .tt-product .tt-image-box,
#same_product_height #tt-pageContent .tt-product-design02 .tt-image-box {
height: 150px;
}

In the theme editor I can adjust this - and in turn the value of height is changed. So I can see the adjustment taking place.

I thought maybe creating a new template - based on the default collection page would be the way to go. So I created sad template - called "bats"
I figured I could make the changes to "bats" so the height would be 150px, and leave the default collection set to 500px. However, when I edit either one it still effects the other. Do I have to manually recreate every .json, and .liquid file for that new "bat" template? Based on the results I am seeing - I assume yes, as both are calling for

{%- include 'collection-template' -%}

So I would have to duplicate - rename and then relink all include calls - correct? This seems inefficient, and if this is the case, I guess I don't understand the point of creating a new template, particularly one based on an existing default template.

So then I thought - maybe it would be easier to just duplicate the above .css and add a class to the images in just the "bat" template. 
When I started down this path I was using Chrome Dev tools - and could easily inspect the item and find the element ( a <div>). I have created the appropriate .css change (appending my initials to the class="tt-img-box" making it class="tt-img-boxRG" - and then apply the change in devtools elements window. Works like a charm. However I cannot for the life of me find where the HTML for the actual <div class>tag is.

Is there a way to find the path back to the file containing the HTML in question through the dev tools or some other third party app? 

Any help would be greatly appreciated, and probably save me a lot of time both now and in the future! Not to mention it might even extend my life span!!!

Anyhow... I look forward to hearing your ideas!

Thanks in advance!