<template>
  <section id="investors-section" data-anchor="investors" :class="{'mobile': mobile}">
    <div class="icon">
      <img src="@/assets/202202/icon_investors@2x.png" alt="investors"/>
    </div>
    <div class="list">
      <a href="https://twitter.com/multiverse_play">
        <img class="multiverse" src="@/assets/202202/multiverse_play.png" alt="multiverse play"/>
      </a>
      <a href="https://www.coso.org/">
        <img class="coso" src="@/assets/202202/coso@2x.png" alt="coso"/>
      </a>
      <a href="https://www.kucoin.com/">
        <img class="kucoin" src="@/assets/202202/kucoin@2x.png" alt="kucoin"/>
      </a>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import RImg from '@/components/ResponsiveImage.vue'
import { AppModule, DeviceType } from '@/store/modules/app'

@Component({
  name: 'InvestorsSection',
  components: {
    RImg
  }
})
export default class extends Vue {
  get mobile() {
    return AppModule.device === DeviceType.Mobile
  }
}
</script>

<style lang="scss" scoped>
#investors-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 350px;
  justify-content: space-between;
  .icon{
    margin-top: 70px;
  }
  .list{
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 20px;
    .coso{
      width: 136px;
    }
    .kucoin{
      width: 314px;
    }
    .multiverse{
      width: 232px;
    }
  }
}
#investors-section.mobile{
  height: unset;
  padding-bottom: 10vw;
  .icon{
    width: 54vw;
    height: 12vw;
    margin-bottom: 10vw;
  }
  .list{
    margin-bottom: 5vw;
    justify-content: space-between;
    width: 80vw;
    gap: 5vw;
    .coso{
      width: 16.4vw;
      height: 16.4vw;
    }
    .kucoin{
      width: 41vw;
    }
    .multiverse{
      width: 20vw;
    }
  }
}
</style>
