<template>
  <div>
    <div class="row d-flex align-items-center tamaño cuerpo">
      <div class="col-12 col-sm-12 col-md-4 col-lg-6 col-xl-6 p-0">
        <img class="card-img" :src="img" alt="Card image cap" />
      </div>
      <div class="col-12 col-sm-12 col-md-8 col-lg-6 col-xl-6 card-body  ">
        <h5>{{ title }}</h5>
        <br />
        <p class="card-text-right">{{ text }}</p>
        <a
          :href="linkD"
          target="_blank"
          v-if="linkD != '' && linkW == ''"
          download
        >
          <span> Descargar aquí</span>
        </a>
        <a :href="linkW" target="_blank" v-if="linkD == '' && linkW != ''">
          <span> Visita nuestra página </span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["linkD", "linkW", "img", "text", "title"],
  data() {
    return {};
  }
};
</script>

<style scoped>
.tamaño {
  width: 40rem;
}
.cuerpo {
  -webkit-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
}

@media (max-width: 440px) {
  .tamaño {
    width: 18rem;
  }
  .cuerpo {
    -webkit-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 9px 17px 0px rgba(0, 0, 0, 0.75);
  }
}
</style>
