Resize and reposition SVG Image on Website

Site URL: https://www.infinix.com/

Hello,

I have a SVG file on our homepage that I need to enlarge and reposition on the website.   Below is the code that is currently supporting the image. infinix-logo-purple.svg

<section class="infinix-home-header infinix-fill-bg infinix-text-center">
    <div class="infinix-background-video">
      <video loop="" muted="" playsinline="" autoplay="" poster="https://www.weo2.com/tpn/c/C1463/img/final_NoLogo.jpg" class="infinix-bg__video">
          <source src="https://www.weo2.com/tpn/c/C1463/docs/final_NoLogo.webm" type="video/webm">
        <source src="https://www.weo2.com/tpn/c/C1463/docs/final_NoLogo.mp4" type="video/mp4">
      </video>
    </div>
    <div class="infinix-logo-main"><img src="/s/infinix-logo-purple.svg"></div>
    <div class="nobio-logo-main"><img src="https://www.weo2.com/tpn/c/C1463/img/nobio-bio-white.svg"></div>
</section>
 

How can I add code that will do this?

You can use this CSS

/* Banner logo mobile */
@media screen and (max-width:640px) {
.infinix-logo-main {
    width: 50%;
}
}