Desafio

HTML

<section class="carrossel">
      <h2 class="carrossel_titulo">MAIS VENDIDOS</h2>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="img/book7.svg"></div>
    <div class="swiper-slide"><img src="img/book8.svg" ></div>
    <div class="swiper-slide"><img src="img/book9.svg" ></div>
    <div class="swiper-slide"><img src="img/book10.svg" ></div>
    <div class="swiper-slide"><img src="img/book11.svg" ></div>
    <div class="swiper-slide"><img src="img/book12.svg" ></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</section>

<section>
<div class="card2">
<!--1º linha-->
<div class="card_descrição2">
<!--1ºcoluna-->
<div class="descrição2">
        <img src="img/estrela.svg">
        <img src="img/estrela.svg">
        <img src="img/estrela.svg">
        <img src="img/estrela.svg">
        <img src="img/estrela.svg">
          <h2 class="descrição2_titulo">Autora do Mês</h2>
          <h3 class="descrição2_titulo-livro">Juliana Agarikov</h3>
          <p class="descrição2_texto">Analista de sistemas e escritora,Juliana é especialista em Front-End. </p>
</div>

<!--2ºcoluna-->    
          <img src="img/Perfil-escritora.svg" class="descrição2_imagem">
     </div>
<!--2º linha-->
<!--1ºcoluna-->
    <div class="card_botoes2">
    <ul class="botoes2">
      <li class="botoes2_item"><img src="img/coração.svg" alt=""></li>
      <li class="botoes2_item"><img src="img/Sacola.svg" alt=""></li>
    </ul>
    <!--2º coluna-->
    <a href="#" class="botoes2_ancora">Saiba mais</a>
    </div>
</section>

 <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
      const swiper = new Swiper('.swiper', {
        spaceBetween: 100,
        slidesPerView: 3,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets'
        }
      })
</script>

CSS

.card2 {
  background: #FFFFFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  margin: 1.5em;
  padding: 1em;
  font-family: var(--fonte-principal);
}

.card_descrição2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em; 
}

.card_botoes2 {
  display: flex;
  justify-content: space-between;
}

.botoes2 {
  display: flex;
}

.descrição2_titulo {
  color: var(--laranja);
  font-weight: 700;
  font-size: 16px;
  padding: 0.5em 0;
}

.descrição2_titulo-livro {
  color: var(--azul-escuro);
  font-weight: 700;
  font-size: 18px;
  padding:0.5 0;
}

.descrição2_texto {
font-weight: 400;
font-size: 14px;
padding: 1em 0;
}

.descrição2_imagem{
  padding: 0.2em;
}

.botoes2_item {
  margin:0.5em;
}

.botoes2_ancora {
  background-color: var(--laranja);
  color: var(--branco);
  padding: 1.5em 2.5em;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;  
}