<template>
  <container>
    <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>
  </container>
</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>
