Need Help with Full-Height Lottie Animation - Prevent Scaling on Window Resize

Hi everyone,

I'm working on a Squarespace site and have embedded a Lottie animation on my landing page using a code block. The animation displays perfectly at full height when the browser window is maximized. However, when I reduce the width of the browser, the Lottie animation scales down proportionally, which is not what I want.

What I'm Trying to Achieve:

• The Lottie animation should always maintain the full height of the browser window (100% height).
• When the browser window's width is reduced, the animation should remain full-height, and only the sides of the animation should be cropped (no scaling down).
• The animation should be horizontally centered in the viewport at all times.
• If it's more elegant, maybe there is a solution where the content scales down to a certain extent, but then crops the sides before revealing the rest of the page

The Problem:

• Currently, the animation scales down when the browser width is reduced, which results in it no longer filling the vertical space.
• I've tried various CSS solutions, but none have worked as expected. Either the animation scales down, or it doesn't maintain its full height.

My Current Setup:

• I'm using an HTML embed block with the following code:
• <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
  <div id="custom-lottie-container">
      <dotlottie-player id="custom-lottie-player" src="https://lottie.host/7c0ee168-d569-43f2-b898-bf2584afa272/zDXg53rx8F.json" background="#FA7E80" speed="1" direction="1" playMode="bounce" loop autoplay></dotlottie-player>
  </div>