<template>
  <div>
    <Header />
    <Nav />
    <!-- <div class="row">
    <div class="col-10 offset-1"> -->
    <Title title="Conoce mas" class="mt-5" />
    <!-- </div>
</div> -->
    <div class="container">
      <div class="row my-5" v-bind:key="de.id" v-for="de in des">
        <div class="titulo col-12 mb-5">
          <h1>{{ de.titulo }}</h1>
        </div>
        <div class="libro col-10 col-sm-5 col-md-5 col-lg-5 col-xl-5 offset-1">
          <img
            :src="de.img"
            class=" figure-img img-fluid  rounded"
            alt="libro"
          />
        </div>
        <div
          class="texto col-10 col-sm-5 col-md-5 col-lg-5 col-xl-5 d-flex align-items-center justify-content-center flex-column"
        >
          <h4>Descripcion:</h4>
          <p class="scroll">
            {{ de.descrip }}
          </p>
        </div>
        <div class="video col-12 d-flex my-4 justify-content-center">
          <iframe
            width="560"
            height="315"
            :src="de.video"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from "../components/header.vue";
import Nav from "../esteticas/nav.vue";
import Footer from "../components/footer.vue";
import Title from "../components/titulo.vue";

export default {
  components: {
    Header,
    Nav,
    Footer,
    Title
  },
  data() {
    return {
      des: [
        {
          id: 0,
          titulo: "Algebra lineal productos internos y teoremas de estructura",
          img:
            "https://edit.org/img/blog/xwdn-editar-portadas-de-libros-gratis.jpg.pagespeed.ic.PmNhyGc59r.jpg",
          descrip: ` Los símbolos se encuentran relacionados a través de signos que
            indican las operaciones que se necesitan efectuar, bien sea
            multiplicación, suma, resta, entre otros, con el objetivo de
            conseguir el resultado de las variables. En este sentido, los
            términos se distinguen o separan por medio de signos, y en el caso
            de estar separadas por el signo de igualdad se llama ecuación.`,
          video: "https://www.youtube.com/embed/gOsM-DYAEhY"
        }
      ]
    };
  }
};
</script>

<style>
.imgLibro {
  height: 600px;
}
.scroll {
  width: 100%;
  height: 60%;
  overflow: auto;
}

@media (max-width: 400px) {
  .scroll {
    height: 90%;
  }
}
</style>
