Only want to crop images in Gallery Reel on mobile displays

I have a big Gallery Reel on my home page displaying both landscape and portrait photos. When I turn on cropping, based on where I have the image focal point circles, it looks pretty good. While I want to optimize for mobile, if I turn "Cropping" on for the Gallery Reel object, the photos on the desktop version of the site look bad (especially the portrait ones, as you can imagine).

I cannot set the "Cropping" property in a screen/viewport-specific manner in Squarespace's site builder. I'm happy to do it via custom code, but can't quite figure it out. The "isCropping: true" property is part of "data-props" and not CSS, so I'm not sure how to add conditional properties.

Would greatly appreciate any help. I haven't activated the 7.1 version of the site yet (which features this issue), so I can't easily point you to a live site. The code in question for the Gallery Reel is below.

<div class="gallery-reel" data-controller="GalleryReel" data-section-id="6740bef25cf0781320471793" data-controls-location="below-left" data-width="full-bleed" data-props="{
"isCropping": true,
"controlsLocation": "below-left",
"viewportHeight": 75,
"width": "full-bleed"
}" style="height: 75vh;" data-show-captions="false" data-test="gallery-slideshow-reel" data-controllers-bound="GalleryReel" id="yui_3_17_2_1_1732304116264_513">

No longer urgent, but I'd love to hear ideas.

I came up with a workaround by creating two sections -- with and without cropping -- and then hid one of them for mobile and the other for desktop. Kluge to be sure, but it works.

You can use this code to Custom CSS box to resize Reel image fullsize on mobile

@media screen and (max-width:767px) {
	.gallery-reel {
		height: 25vh !important;	
}
}

Save & reload the page

You can adjust number 25