Как сохранить логотип в центре видеокомпонента при любом разрешении экрана ⇐ CSS

[Anonymous]

У меня есть компонент React, в котором есть видео с логотипом компании в центре, но когда я переключаюсь на адаптивный экран, например на мобильном телефоне, логотип продолжает исчезать из видео. Как это исправить?
Версия для ПК
Версия для iPhone

Код: Выделить всё

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

function video(){
return(



Seu navegador não suporta o elemento de vídeo.


);
}

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;

Я пробовал использовать функции положения, z-индекс, используемый для логотипа, никогда не выходил из видео, но это произошло, но, похоже, ничего не работает.>

Подробнее здесь: https://stackoverflow.com/questions/791 ... ution-of-t