<template>
  <section id="chip_section" data-anchor="chip">
    <div class="title">
      <img src="@/assets/main/p4/txt_title.png">
      <span class="text">Earn your NFTs item by playing the game and sell it on the markedplace to make money.</span>
    </div>
    <img class="main-img" src="@/assets/main/p4/main.png">
    <img class="main-img_2" src="@/assets/main/p4_m/main.png">
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'ChipSection',
  components: {

  }
})
export default class extends Vue {
}
</script>

<style lang="scss" scoped>
#chip_section {
  background-image: url('~@/assets/main/p4/bg_p4.png');
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.title {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title img {
  width: 562px;
  height: auto;
}
.title .text{
  color: white;
  font-size: 28px;
  margin: 10px 15px;
  text-align: center;
  text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369;
}
.main-img{
  width: 87vw;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  margin-left: auto;
  margin-right: auto;
}
.main-img_2 {
  display: none;
}
@media (max-width: 767px) {
  .main-img{
    display: none;
  }
  .title img {
    width: 281px;
  }
  .title .text{
    font-size: 14px;
  }
  .main-img_2{
    display: block;
    width: 90vw;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20vh;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
