<template>
  <div class="header">
    <nuxt-link to="/">
      <div class="secondary-logo">
        <img src="/logo/logo_apes.svg" height="50px" alt="Logo APES"/>
      </div>
      <div class="main-logo">
        <img src="/logo/main_logo.svg" width="245px" alt="Boussole PLUSS"/>
      </div>
    </nuxt-link>
  </div>
</template>

<style lang="scss" scoped>
@import "assets/css/spacing";
@import "assets/css/color";

.header {
  width: 100%;
  height: 115px;
  margin-bottom: $xx_medium;
  background-repeat: no-repeat;
  background-image: url("/decoration/background.svg");
  background-position: bottom center, 50%;
  background-size: cover;

  .secondary-logo img {
    padding: 12px 0 0 12px;
  }

  .main-logo {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 40px;
    left: 0;
    right: 0;
    width: 225px;
  }
}

</style>
