How to make an image fit only 50% of the screen in NextJS

I’m trying to make a image fit only 50% of the screen in NextJS. NextJS provides an Image component that we have to use and not the image element. That Image component already has its own inline styling for the image element and wraps it in a styled span element.
Currently I wrap that Image component in a span tag so I can style it but I’m finding it difficult to make it fit only 50% of the screen.

Code:

<div className='pagewrapper'>
  <section className='authpages_section'>
    <span className='authpages_heroimg'>
      <Image src='/assets/hero.png' alt='an hero img' />
    </span>
  </section>
  <section className='authpages_section'>
   <Logo />
   <div>{children}</div>
  </section>
</div>

styling:
.pagewrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .authpages {
     &_section {
       flex-basis: 50%;
       height: 100vh;
     }

     &_heroimg {
       display: inline-flex;
     }
   }
}