<template>
  <div id="imgContainer">
    <img src="../assets/photos/group.png" class="imgStyle" id="img001">
    <img src="../assets/photos/ura-bleu.png" class="imgStyle" id="img002">
    <img src="../assets/photos/ura-rouge.png" class="imgStyle" id="img003">
    <img src="../assets/photos/ura-vert.png" class="imgStyle" id="img004">
  </div>
</template>

<style scoped>

  #imgContainer{
    position: fixed;
    width:100vw;
    height: 100vh;
    background-color: transparent;
    z-index: 29;
  }

  .imgStyle{
    position: fixed;
    width: 333px;
    height: auto;
    border-radius: 16.1px;
  }

  #img001{
    top:16.1%;
    left:33.3%;
    width:250px;
    z-index: 31;
  }
  #img002{
    top:20%;
    left:-5%;
    z-index: 32;
    width:200px;
  }
  #img003{
    top:1.61%;
    left:13.12%;
    width:150px;
    z-index: 30;
  }
  #img004{
    top:-3.33%;
    left:60%;
    width:150px;
  }

  /*=======================Format PC étroit*/
  @media(min-width: 600px){
    #img001{
      top:16.1%;
      left:33.3%;
      width:300px;
      z-index: 31;
    }
    #img002{
      top:20%;
      left:0%;
      z-index: 32;
      width:333px;
    }
    #img003{
      top:1.61%;
      left:13.12%;
      width:200px;
      z-index: 30;
    }
    #img004{
      top:-3.33%;
      left:60%;
      width:200px;
    }
  }

  /*=======================Format PC large*/
  @media(min-width: 1000px){
    #img001{
      top:16.1%;
      left:50%;
      width:333px;
      z-index: 31;
    }
    #img002{
      top:13.12%;
      left:20%;
      z-index: 32;
      width:400px;
    }
    #img003{
      top:-3.33%;
      left:33.3%;
      width:200px;
      z-index: 30;
    }
    #img004{
      top:-3.33%;
      left:60%;
      width:200px;
    }
  }
</style>

<script>
  export default {
    name : 'ImagePannel',
    mounted(){
      console.log("Image pannel is loaded!");
    }
  };
</script>
