[Dúvida] porcentagens , formatação , dispositivos diferentes

fiquei com dúvidas quanto à formatação , por exemlo no video é citado um gap de 80px entre os 2 elementos filhos do cabecalho "home" & "sobre mim" entretanto , em um dispositivo móvel por exemplo o gap seria algo muito mais percentual , ficaria então muito diferente do computador por exemplo. a minha própria página que seguindo os tutoriais aprendi e fui fazendo tem que ficar em 67% para ficar com o mesmo layout do video , a fonte fica um pouco distorcida e etc , então como resovler isso ? utilizar em porcentagem? se sim como eu pegaria os valroes do figma em px e transformaria em "%" ? eu teria de fazer cauculos ou tem uma opção que me mostra o percentual ? ou existe alguma tag que faça ficar formatado certo ? usei o border box mas nao adiantou , pensei que o vh100 pudesse ajudar em algo mas tambem nao funcionou pelo que parece , vou deixar aqui em baixo o codigo , vou tirar a parte padrao do html pois nao vai caber aqui em baixo , isso inclui o até o html:

`

<main class="apresentacao">
    <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">  Eleve seu negócio digital<br> a outro nível 
            <strong class="titulo">com um<br> Front-end de qualidade!
            </strong></h1>

            <p class="apresentacao__conteudo__paragrafo">Olá! Sou Joana Santos, desenvolvedora 
            Front-end <br> com especialidade em <strong>React, HTML e
            CSS</strong>. Ajudo<br> pequenos negócios e designers a 
            colocarem em<br> prática boas ideias. Vamos 
            conversar?</p>

            <div class="apresentacao__links">
                <h2 class apresentacao__links__subtitulo>Acesse minhas redes:</h2>
             
                <a class="apresentacao__links__link" href="https://instagram.com/rafaballerini">      
                <img src="./assets/instagram.png">Instagram </a>

            <a class="apresentacao__links__link" href="https://github.com/guilhermeonrails"><img src="./assets/github.png">GitHub</a>

            <a class="apresentacao__links__link" href="https://twitch.tv/smurfdoyoda"><img src="./assets/twitch.png">Twitch</a>
            </div>
        </section>
       
        <img src="./assets/Imagem.png" alt="Foto da Joana Santos programando">


        
</main>
<footer class="rodape">
    <p>Desenvolvido por Jorge Oliveira</p>
</footer>

css:

@import url('https://fonts.googleapis.com/css2?family= Krona+One & family= Montserrat:wght@400;600 & display=swap') ;


*{
    margin: 0;
    padding: 0;
}

body{
    box-sizing: border-box;

    background-color: #000000;
    color: #F6F6F6;
}


.titulo{
    color: #22D4FD;
}
.apresentacao{
    padding: 8% 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 84px;
    
    
}
.apresentacao__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: first baseline;
    
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
    line-height: 56px;
    
    
}

.apresentacao__conteudo__paragrafo {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    line-height: 36px;
    
}

.apresentacao__links{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    
    
}

.apresentacao__links__subtitulo{
    font-size: 24px;
    font-family: 'Krona One', sans-serif;
    line-height: 40px;
    font-weight: 400;
    
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid #22D4FD;
    width: 378px;
    padding: 21.5px 0px;
    border-radius: 8px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color:#F6F6F6;
    text-decoration: none;
}

.apresentacao__links__link:hover{
    background-image: url(https://media0.giphy.com/media/jnze2sduzuYBqFrnZj/giphy.gif);
    transition : 300ms;
    transform: scale(1.1);
    background-size: 380px 120px;
}
   
.rodape{
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #22D4FD;
    color: #000000;
    font-family: 'Montserrat' , sans-serif;
    font-weight: 400;
    font-size: 24px;
    padding: 23.64px;

}


.cabecalho__menu__links{
    color: #22D4FD;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;

}