<template>
  <div class="our-portfolio-item wow fadeInUp" :data-wow-delay="item.time" >
    <img v-lazy="assetsUri('images/'+item.img+'.png')" class="our-portfolio-item-img" alt="">
    <h3 class="our-portfolio-item-title">{{item.title}}</h3>
    <p class="our-portfolio-item-content">{{item.content}}</p>
    <nuxt-link :to="item.link" tag="a" class="our-portfolio-item-a">Read more<van-icon name="arrow" color="#F49F00" ></van-icon></nuxt-link>
  </div>
</template>

<script>
  import {
    assetsUri
  } from "../../utils";

  export default {
        name: "OurPortfolioItem",
    data(){
          return {
            assetsUri
          }
    },
      props:{
          item:{
            default:()=>{},
            type:Object
          }
      }
    }
</script>

<style scoped lang="less">
.our-portfolio-item{
  max-width: 4.09rem;
  width: 100%;
  min-height: 4.97rem;
  opacity: 1;
  text-align: center;
  cursor: pointer;
  transition: all .3s ease-in;
  &-a{
    display: block;
    margin: 0 auto;
    font-size: .16rem;
    font-family: Manrope;
    font-weight: 400;
    line-height: .32rem;
    color: #F49F00;
    text-decoration: underline;
    padding-bottom: .70rem;
    margin-top: .32rem;
    >i{
      font-size: .12rem;
    }
  }
  &:hover{
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
    transform: scale(1.05);
  }
  &-title{
    margin-top: .25rem;
    font-size: .24rem;
    font-family: Manrope;
    font-weight: bold;
    line-height: .84rem;
    color: #342927;
  }
  &-content{
    margin: 0 auto;
    max-width: 3.52rem;
    min-height: 1.18rem;
    padding-left: .3rem;
    padding-right: .3rem;
    font-size: .16rem;
    font-family: Manrope;
    font-weight: 400;
    line-height: .32rem;
    color: #302D2C;
  }
  &-img{
    display: block;
    width: .88rem;
    height: .88rem;
    margin: 77px auto 0;

  }
}

@media screen and (max-width: 1250px) {
  .our-portfolio-item{
    margin-top: .5rem;
    width: 4.09rem;
    &:first-child{
      margin-top: 0;
    }
  }
}
@media screen and (max-width: 830px) {
  .our-portfolio-item{
    margin-top: .5rem;
    width: 100%;
    &:first-child{
      margin-top: 0;
    }
  }
}
  @media screen and (max-width: 768px) {
    .our-portfolio-item{
      margin-top: .5rem;
      max-width: 100%;
      min-height: 4.97rem;
      text-align: center;
      &:first-child{
        margin-top: 0;
      }
      &-a{
        margin: .45rem auto 0;
        font-size: .3rem;
        font-weight: 400;
        line-height: .32rem;
        padding-bottom: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        >i{
          font-size: .24rem;
        }
      }
      &:hover{
        box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
      }
      &-title{
        margin-top: .52rem;
        font-size: .4rem;
        font-weight: bold;
        line-height: .84rem;
      }
      &-content{
        margin: .6rem auto 0;
        max-width: 6.30rem;
        min-height: 1.35rem;
        padding-left: .3rem;
        padding-right: .3rem;
        font-weight: 400;
        font-size: .24rem;
        line-height: .34rem;
      }
      &-img{
        display: block;
        width: 2.42rem;
        height: 2.42rem;
        margin: .99rem auto 0;

      }
    }
  }
</style>
