<template>
  <div>
    <app-menu></app-menu>
    <main class="centrar">
      <div class="titulo"> </div>
      <img src="../assets/nuevo_cartel.jpeg" alt="imagen_coloquio" />
    </main>
  </div>
</template>

<script>
import webMenu from '../estetica/menu.vue'

export default {
  components: {
    appMenu: webMenu,
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.titulo {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
h1 {
  padding-left: 2rem;
  padding-right: 2rem;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
}
main img {
  width: 20rem;
  margin-bottom: 6rem;
}

@media screen and (min-width: 768px) {
  main img {
    width: 40rem;
  }
  h1 {
    display: inline;
    border-bottom: solid 0.1rem black;

    font-size: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  main img {
    width: 60rem;
  }
  h1 {
    font-size: 2.5rem;
  }
}
</style>
