<main>
    <section id="carousel">
    <div
      id="carouselExampleCaptions"
      class="carousel slide"
      data-bs-ride="carousel"
    >
      <div class="carousel-indicators">
        <button
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide-to="0"
          class="active"
          aria-current="true"
          aria-label="Slide 1"
        ></button>
        <button
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide-to="1"
          aria-label="Slide 2"
        ></button>
        <button
          type="button"
          data-bs-target="#carouselExampleCaptions"
          data-bs-slide-to="2"
          aria-label="Slide 3"
        ></button>
      </div>
      <div class="carousel-inner mx-auto">
        <div class="carousel-item active">
          <img
            src="https://i0.wp.com/www.fastpassviagens.com.br/wp-content/uploads/2014/07/wallpaper6-800x600.jpg?fit=800%2C600&ssl=1"
            class="mx-auto d-block w-75"
            alt="..."
          />
          <div class="carousel-caption d-none d-md-block">
            <h5>AQUI ESTA A IMAGEM 1</h5>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, vitae!
            </p>
          </div>
        </div>
        <div class="carousel-item">
          <img
            src="https://i1.wp.com/www.fastpassviagens.com.br/wp-content/uploads/2014/07/wallpaper7-800x600.jpg?ssl=1"
            class="mx-auto d-block w-75"
            alt="..."
          />
          <div class="carousel-caption d-none d-md-block">
            <h5>AQUI ESTA A IMAGEM 2</h5>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus,
              accusamus.
            </p>
          </div>
        </div>
        <div class="carousel-item">
          <img
            src="https://quantocustaviajar.com/blog/wp-content/uploads/2019/03/economize-viagem-de-onibus-buser-2.jpg"
            class="mx-auto d-block w-75"
            alt="..."
          />
          <div class="carousel-caption d-none d-md-block">
            <h5>AQUI ESTA A IMAGEM 3</h5>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati,
              a?
            </p>
          </div>
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExampleCaptions"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#carouselExampleCaptions"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div></section>
  
    <h2>Descubra novas Rotas!</h2>
    <section id="card">
      <% lugares.forEach((lugar) => {%>
      <div class="card card_detalhes" style="width: 20rem; height: 30rem ;">
        <img src="<%=lugar.imagem%>" class="card-img-top" alt="imagem-viagem" width="100" >
        <div class="card-body">
          <h5 class="card-title"><%= lugar.lugar %></h5>
          <p class="card-text"><%= lugar.frase %></p>
        </div>
        <div class="card-body">
          <a href="/detalhes/<%=lugar.id%>" class="card-link">Saiba Mais</a>
        </div>
      </div>
      <% }) %>
    </section>
  </main>
  