<template>
  <el-card class="case-card app" shadow="hover" :body-style="{ padding: '0px' }" style=" padding: 0px">
    <img :style="{background: `url(${thumb})`}" class="image" />
    <div class="body">
      <h3>{{title}}</h3>
      <div class="bottom clearfix caption">{{caption}}</div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CaseCard',
  props: [
    'thumb',
    'title',
    'caption',
  ],
}
</script>

<style lang="less" scoped>
@media (min-width: 992px) {
  .case-card {
    width: 100%;
    padding: 0;
  
    .image {
      bottom: 0;
      width: 100%;

      height: 0;
      padding-bottom: 66%;
      background-size: 100% 100% !important;
    }
 
    .body {
      padding: 1.5rem;
      text-align: left;

      h3 {
        margin: 0;
        padding: 0;
        font-weight: 400;
        font-size: 3rem;
        color: #000;
        line-height: 1.2em;
        
      }
 text-decoration: none !important;
      .caption {
        font-size: 2.0rem;
        color: #727171;
        
        line-height: 1.2em;
        margin-top: 6px;
      }
    }
  }
}

@media (max-width: 992px) {
  .case-card {
    width: 100%;
    padding: 0;

    .image {
      bottom: 0;
      width: 100%;

      height: 0;
      padding-bottom: 66%;
      background-size: 100% 100% !important;
    }

    .body {
      padding: 0.3rem 1rem;
      text-align: left;

      h3 {
        margin: 0;
        padding: 0;
        font-weight: 400;
        font-size: 1.2rem;
        color: #000;
        line-height: 1em;
      }

      .caption {
        font-size: 0.8rem;
        color: #727171;
        line-height: 1em;
      }
    }
  }
}
</style>