<template>
  <section class="our-portfolio-view" :style="isCssStyle">
    <div class="our-portfolio-view-wrap">
      <h1 class="our-portfolio-view-h1-1 wow fadeInUp" data-wow-delay=".4s" >We Drive Real Value To</h1>
      <h1 class="our-portfolio-view-h1-1 wow fadeInUp" data-wow-delay=".5s">Our Portfolio</h1>
      <div class="our-portfolio-view-card">
        <slot></slot>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: "OurPortfolio",
    props:{
      cssStyle:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    computed:{
      isCssStyle(){
        return this.cssStyle
      }
    }
  }
</script>

<style scoped lang="less">
  .our-portfolio-view{
    width: 100%;
    box-sizing: border-box;
    padding-top: 1.65rem;
    padding-bottom: 1.57rem;
    &-card{
      margin-top: 1.40rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    &-h1-1{
      font-weight: bold;
      text-align: center;
      height: .65rem;
      font-size: .48rem;
      font-family: Manrope;
      color: #302D2C;
      &:last-child{
        margin-top: .16rem;
      }
    }
    &-wrap{
      width: 100%;
      max-width: 13rem;
      margin: 0 auto;
    }
  }
  @media screen and (max-width: 1250px) {
    .our-portfolio-view{
      &-card{
        flex-wrap: wrap;
        justify-content: space-around;
      }
    }
  }
  @media screen and (max-width: 768px){
    .our-portfolio-view{
      padding-top: .51rem;
      padding-bottom: .51rem;
      &-h5-wrap{
        height: 100% !important;
      }
      &-card{
        margin-top: .47rem;
        flex-direction: column;
        padding-left: .3rem;
        padding-right: .3rem;
        box-sizing: border-box;
      }
      &-h1-1{
        height: .82rem;
        font-size: .6rem;
        &:last-child{
          margin-top: 0;
        }
      }
    }
  }
</style>
