Olá, Juliana. Tudo bem com você?
Olhando o seu HTML eu notei que alguns detalhes nas classes.
Na tag <section> há uma classe chamada ofertas--item, substitua ela por ofertas__cards--item que é a classe responsável por diversas estilizações (incluindo o arredondamento das bordas).
Na <div> logo abaixo há uma classe chamada ofertas__cards--grupo, substitua por ofertas__card.
Na <div> abaixo dessa, há uma classe ofertas__cards--conteudo, cards está no plural, é só por no singular.
Na tag <a>, há uma classe ofertas__card--botao-link, substitua por ofertas__card--botao-texto.
O código ficou assim:
<section class="ofertas__cards--item ofertas__cards--japao">
<div class="ofertas__card">
<div class="ofertas__card--conteudo">
<header class="ofertas__card--destino">
<div class="ofertas__card--destino-tipo">HOTEL+AÉREO</div>
<h2 class="ofertas__card--destino-nome">Japão</h2>
</header>
<div class="ofertas__card--preco">R$ 4000</div>
<div class="ofertas__card--botao">
<a href="#" class="ofertas__card--botao-texto">Ver detalhes</a>
</div>
</div>
</div>
</section>
Após essas alterações, você vai notar que terá um espaçamento maior entre os elementos do card. Isso é por conta da margin padrão que vem inclusa nos navegadores. Se quiser ajustar isso, você pode zerar a margin para essa classe no index.css.
O código fica assim:
.ofertas__card--destino-nome {
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 0; // Basta adicionar essa linha
}
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
