Não estou conseguindo fazer o design responsivo | HTML e CSS

Olá, eu estou tentando fazer a tela responsiva para um projeto que eu consegui fazer sozinha. Porém quando eu coloco o @media screen e edito, a tela desktop muda também. O projeto está assim.

HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&display=swap" rel="stylesheet">
    <title>Guide de preço</title>
</head>
<body>
    <main class="conteudo">
        <section class="conteudo_um">
            <h1 class="titulo">Junte-se a nossa comunidade!</h1>
            <p class="texto">30 dias de acesso gratuito ou o seu dinheiro de volta.</p>
            <p class="texto_secundario">Ganhe acesso para todos os nossos tutoriais que contam com vários especialistas da área de html e css. Perfeito para estudantes da área, tanto iniciantes quanto avançados.</p>
        </section>
        <section class="dois_conteudo">
            <div class="conteudo_dois">
            <h2 class="titulo-dois">Inscrição mensal</h2>
            <h1 class="texto_dois">R$ 29,00<p class="texto_mini">por mês</p></h1>
            <p class="texto_secundario__dois">Acesso total por menos de R$1,00 por dia.</p>
            <button class="botao"> <a class="botaoo"  href="#">Inscrever-se</a> </button>
        </div>
        <div class="conteudo_tres">
            <h2 class="texto_tres">Por que nós?</h2>
            <li class="texto_secundario__tres">Tutoriais por especialistas da indústria.</li>
            <li class="texto_secundario__tres"> Exercicios de codificação.</li>
            <li class="texto_secundario__tres">Acesso ao nosso repositório do GitHub.</li>
            <li class="texto_secundario__tres">Comunidade do fórum.</li>
            <li class="texto_secundario__tres">Novos videos toda semana.</li>
        </div>
    </section>

    </main>
    
</body>
</html>

CSS:
:root{
    --font-principal: 'Montserrat';
    --cor-fundo:#F5CABA;
    --branco:#ffffff;
    --rosa:#DB9A9C;
    --roxo:#F9AFD7;
    --verde:#ACDF9D;
    --cinza: #c0bab8;
}
body{
    background-color: var(--cor-fundo);
    font-family: var(--font-principal);
}
.conteudo{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    width: 80%;
    margin: auto;
    padding: 7em;
}
.conteudo_um{
    background-color: var(--branco);
    width: auto;
    height: 90%;

}
.titulo{
    font-family: var(--font-principal);
    color: var(--rosa);
    font-weight: 800vh;
    font-size: 2em;
}
.texto{
    color: var(--verde);
    font-weight: 700vh;
    font-size: 1.5em;
}
.dois_conteudo{
    display: flex;
    width: 100%;
    height: 100%;
}
.conteudo_dois{
    width: 50%;
    height: 100%;
    padding-top: 8vh;
    padding-bottom: 8vh;
    background-color: var(--rosa);
    color: var(--branco);
    align-items: center;
}
.titulo-dois{
    padding-top: 1vh;
    padding-bottom: 3vh;
}
.texto_secundario{
    color: var(--cinza);
    font-size: 2.5vh;
}
.texto_dois{
font-size: 2.5em;
}
.texto_mini{
font-weight: 100;
font-size: 1.6vh;
padding-bottom: 3vh;
}
.texto_secundario__dois{
    padding-bottom: 1vh;
}
.botao{
    font-size: 2em;
    background-color: var(--verde);
    border-radius: 10px;
    border: none;
    color: var(--branco);
    width: 70%;
    padding-top: 3vh;
    padding-bottom: 3vh;
    align-items: center;
}
.botao :hover{
    color: #c0bab8;
}
.botaoo{
    text-decoration: none;
    color: var(--branco);
}
.conteudo_tres{
    width: 50%;
    height: 100%;
    padding-top: 3vh;
    padding-bottom: 5vh;
    align-items: center;
    background-color: var(--roxo);
    color: var(--branco);
    list-style-type: none;
}
.texto_tres{
    padding-top: 3vh;
    padding-bottom: 2vh;
    margin-bottom: 6vh;
}
.texto_secundario__tres{
    margin-bottom: 4vh;
    font-size: 1.5em;
}

Olá Nathalia! Como vai?

Analisando o código que você compartilhou, parece que você está no caminho certo para tornar o design do seu projeto responsivo. Para isso, é importante colocar os valores corretos nos @media query, levando em consideração as necessidades do projeto e o design desejado.

Por exemplo:

/* Estilos para telas médias (tablets, laptops) */
@media screen and (min-width: 768px) {
  /* Aqui, você define o estilo para telas maiores, como tablets e laptops */
}

/* Estilos para telas maiores (desktops) */
@media screen and (min-width: 1024px) {
  /* Aqui, você define o estilo para telas de desktop maiores */
}

Dessa forma, você poderá ajustar o layout, tamanhos de fonte, margens e outras propriedades para que a página se comporte da maneira desejada em cada tamanho de tela.

Além disso, recomendo que você faça os cursos CSS: Flexbox e layouts responsivos e HTML e CSS: trabalhando com responsividade e publicação de projetos para aprimorar ainda mais o resultado do seu projeto.

Estou aqui para te ajudar em qualquer dúvida que tiver. Continue com o bom trabalho e bons estudos! Se precisar de mais orientações, estou à disposição.

Abraços!

Mergulhe em programação