How to keep the logo in the center of the video component in any resolution of the screen

I have a React component that has a video with a company logo in the center, but when I switch to a responsive screen like a cellphone the logo keep getting out of the video, how do I fix this?

PC Version

Iphone Version

import videoJacare from '../imgs/ny4k.mp4';
import imgTest from '../imgs/LogoFecapFinanceOriginal2.png';
import styled from "styled-components";

function video(){
  return(
    <Intro>
      <Logo src={imgTest} alt="" />
      <Jacare
        src={videoJacare}
        poster={imgTest}
        loop
        autoplay="true"
        muted
        playsInline
        preload
        disablePictureInPicture
      >
        Seu navegador não suporta o elemento de vídeo.
      </Jacare>
    </Intro>
  );
}

const Jacare = styled.video`
width: 100%;         
  height: auto;        
  max-height: 80vh;    
  object-fit: cover;   
  align-items: center;
`

const Texto = styled.h1`
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
`

const Intro = styled.div`
  text-align: center;
  align-items: center;
  position: relative;
`

const Logo = styled.img`
  position: absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  color: #fff;
  max-width: 25%;
  max-height: 25%;
  transition: all 0.3s ease-in-out;
`

export default video;

I’ve tried using position functionalities, the z-index that is used to the logo never get out of the video, but it did, but nothing seems to work.