<template>
  <div class="row divMaster header cl-12 azulUnam">
    <div
      class="logo_unam  col-4 offset-1 d-inline-flex my-2 align-items-center"
    >
      <a href="https://www.unam.mx/" target="_blank">
        <img class="sizeImg" src="../assets/Logo-UNAM.png" alt="logo unam" />
      </a>
    </div>

    <div
      class="logo_acatlan  col-4  offset-2 d-inline-flex justify-content-end my-2 align-items-center"
    >
      <a href="https://www.acatlan.unam.mx/" target="_blank">
        <img
          class="sizeImg"
          src="../assets/FES-editoriales.png"
          alt="logo unam"
        />
      </a>
    </div>

    <div
      class="logo_acatlan_resp col-8  offset-2 d-flex justify-content-center my-2 align-items-center"
    >
      <a href="https://www.acatlan.unam.mx/" target="_blank">
        <img
          class="sizeImg"
          src="../assets/FES-editoriales.png"
          alt="logo unam"
        />
      </a>
    </div>
  </div>
</template>

<style>
.divMaster {
  height: 7em;
  margin: 0 auto;
}

.azulUnam {
  background-color: #1e3c70;
}
.sizeImg {
  height: 5rem;
}
.logo_acatlan_resp {
  display: none !important;
}

@media (max-width: 450px) {
  .logo_acatlan,
  .logo_unam {
    display: none !important;
  }
  .logo_acatlan_resp {
    display: block !important;
  }
  .logo_acatlan_resp a img {
    height: 5rem;
  }
}
</style>
