It seems to me---and maybe my intuition is wrong---you WILL have more bandwidth usage loading

<div class="carousel-container xyz-row xyz-row-xs--top xyz-row-xs--nowrap" data-v-72ffe0f0="">
<div class="doorway-item xyz-col-xs-15 xyz-col-md-5" data-v-72ffe0f0="">
<div class="doorway-carousel-media-container" ...><a class="link-wrapper link-routable cms-media doorway-carousel-media" data-v-9f4decfa="" data-v-129da109="" data-v-72ffe0f0="" ...>...</a></div>
<a class="link-wrapper link-routable" ...>...</a>
</div>
<div class="doorway-item xyz-col-xs-15 xyz-col-md-5" data-v-72ffe0f0="">
<div class="doorway-carousel-media-container" ...><a class="link-wrapper link-routable cms-media doorway-carousel-media" data-v-9f4decfa="" data-v-129da109="" data-v-72ffe0f0="" ...>...</a></div>
<a class="link-wrapper link-routable" ...>...</a>
</div>
<div class="doorway-item xyz-col-xs-15 xyz-col-md-5" data-v-72ffe0f0="">
<div class="doorway-carousel-media-container" ...><a class="link-wrapper link-routable cms-media doorway-carousel-media" data-v-9f4decfa="" data-v-129da109="" data-v-72ffe0f0="" ...>...</a></div>
<a class="link-wrapper link-routable" ...>...</a>
</div>

...

<div class="doorway-item xyz-col-xs-15 xyz-col-md-5" data-v-72ffe0f0="">
<div class="doorway-carousel-media-container" ...><a class="link-wrapper link-routable cms-media doorway-carousel-media" data-v-9f4decfa="" data-v-129da109="" data-v-72ffe0f0="" ...>...</a></div>
<a class="link-wrapper link-routable" ...>...</a>
</div>
</div>

... vs:

<div class="carousel">
<div class="caro-card">
<a href="product-url">
<picture>...</picture>
</a>
</div>
<div class="caro-card">
<a href="product-url">
<picture>...</picture>
</a>
</div>
<div class="caro-card">
<a href="product-url">
<picture>...</picture>
</a>
</div>

...

<div class="caro-card">
<a href="product-url">
<picture>...</picture>
</a>
</div>
</div>

Sure, the CSS in the second case will be larger, but that one file gets cached for the remainder of the visit, whereas every asynchronously loaded <div> in the first case is gonna be 3.8 KB. An inventory with 3,176 items will take 12.2 MB to fully load WITHOUT product descriptions e.g. user decides to search empty string and scroll all the way to the bottom. (These numbers are rather exact because I picked a random, well-known, segment-specific shop---not cherry-picked, just the first one I thought of.)

Maybe someone at this large, segment leading company carefully considered that they should have 12 different srcset pictures because "responsive" and "bandwidth", but I doubt it because the URLs violate DRY and have escaped characters in the query part and the URL indicates this brand doesn't host static content on their own server (as in, they've hired someone else and have non-technical employees log in to a CMS and upload/update everything).

More realistically, the company that creates these websites imports a framework that has already considered that 2.3% of users are using Edge, 3.8% are using Safari, 0.4% are using Opera on Mobile, 0.2% are using Kiwi on Mobile, 0.8% have disabled Javascript, etc. and then decide they absolutely MUST have everything display as-desired on all platforms rather than excluding the most unusual or ancient user agents that represent far less than one percent of sales. I mean, who's going to leave if your site loads a little slow (but like all the others)? Who leaves if it loads "not at all"?

I see everyone from blogs to clothing stores slapping in a dozen minimized JS frameworks, fonts, reams of generated CSS, ElasticSearch, jQuery, images scaled or loaded improperly, cookie cutter UI elements and giant rounded corners and then some having the nerve to link to a "How awesome is our site?" survey (aka another nugget of JS) where I feel obliged to reply "Your front page takes 8.5 seconds to load on current stable Firefox, has 30 warnings and an error... How do YOU think you did?"

While I'm no web specialist, it seems you could even have a lightweight front page that has a small or even inline stylesheet while the sitewide CSS is loaded asynchronously (cached) after the front page is presented, so the first thing visitor sees is a quick loading page, the 2 to 4 second load happens in the background, they click a link, BOOM next page loads in its full-featured, one-or-two-human-readable-class-per-element glory with the Sneaky Load Giant CSS as an already-cached dependency.

I've also seen much worse violations than my example: divs within divs 20 deep, 15+ clvrly-abrvd-cls per div, because someone decided it's easier as a dev to have "flex flex-col-reverse lg:flex-row items-center justify-center mt-20 mb-32 md:mb-40" outside of every paragraph (instead of a single, well-defined paragraph class that could even inherit common custom properties) or better yet, <footer class="ou ov ow ox oy oz pa pb pc ab q pd pe c">

(I'm sorry if you see that I called out a snippet of your blog here, but that last example belongs to a Next.JS/TailwindCSS advocate, and it's like he took the ideas of the coinventors of CSS and then went full Second City improv, "yes, AND!")