body {
  font-family: "Roboto", sans-serif;
}

.bg-image {
  background-image: url("./img/drawkit-transport-scene-12.png"); /* Reemplaza 'ruta-de-la-imagen.jpg' con la ruta real de tu imagen */
  background-size: cover; /* Ajusta la imagen al tamaño del div */
  background-position: center; /* Centra la imagen en el div */
  width: 100%; /* Ancho del div */
  height: 100vh; /* Altura del div */
}

.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Opacidad oscuro: 0.7 */
  z-index: -1;
}

.text-justify {
  text-align: justify;
}

.grid-template-destinos {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .grid-template-destinos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid-template-destinos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-template-resenas {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .grid-template-resenas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .grid-template-resenas {
    grid-template-columns: repeat(2, 1fr);
    width: 75%;
  }
}