<template>
  <div :class="ifItem()">
    <md-card>
      <md-card-media-cover md-solid>
        <md-card-media md-ratio="1:1">
          <img :src="getImg()" :alt="this.title_text">
        </md-card-media>
        <md-card-area>
          <md-card-header>
            <span class="md-title" style="text-align: right; font-family: tf2build; border-bottom: 1px solid">{{this.title_text}}</span>
            <span class="md-subhead" style="text-align: right; font-family: tf2secondary">{{this.main_text}}</span>
          </md-card-header>
        </md-card-area>
      </md-card-media-cover>
    </md-card>
  </div>
</template>

<script>
export default {
  name: 'RuleCard',
  props: {
    img_src: String,
    title_text: String,
    main_text: String,
    md_size: Number,
    box_in_item:Boolean
  },
  methods: {
    ifItem() {
      return this.box_in_item?`md-layout-item md-size-${this.md_size}`:'';
    },
    getImg() {
      return this.img_src;
    }
  }
}
</script>

<style>
.md-card {
  border-radius: 15px;
  margin: 7% 0%;
}

.md-card-media {
  border-radius: 15px;
}

.md-card-area {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.9)) !important;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
</style>