Looking for help adapting an image to resize based on screen size (trying to make it mobile friendly

Technical Q&A
1

The code is the header of the collection page on prestige theme.

I’d like to make it so that it resizes based on the window’s size

Current code:

Here is the CSS associated with it:

@supports (--css: variables) {
  .PageHeader__ImageWrapper {
    top: calc(-1 * 0px - 0px * 0);
    top: calc(-1 * var(--announcement-bar-height, 0px) - var(--header-height, 0px) * var(--use-unsticky-header, 0));
    height: calc(100% + 0px + 0px * 0);
    height: calc(100% + var(--announcement-bar-height, 0px) + var(--header-height, 0px) * var(--use-unsticky-header, 0));
  }
}

Thank you very much in advance for the help.