<template>
    <div class="fullwidth banner_int">
      <slot name="image"></slot>
      <!--Img class="img_banner_bg" :src="_imageSrc" :alt="_alt" :width="_width" :height="_height" slot="image"/-->
      <div class="banner_topo_conteudo fullwidth">
		     <div class="container">
        	<div class="banner_topo_conteudo_wrapper fullwidth">
            <div class="banner_topo_conteudo_left"><slot name="content"></slot></div>
          </div>
		     </div>
      </div>
	   </div>
</template>

<script lang="ts">
import Vue from 'vue';

import Img from './Img.vue';
import Span from './Span.vue';

export default Vue.extend({
  name: 'BannerInt',
  components: { 
      Img, Span
  },
  props: {
    imageSrc: {
      type: String,
    },
    height: {
      type: Number,
    },
    width: {
      type: Number,
    },
    alt: {
      type: String,
    }
  },
  computed: {
    _imageSrc (): string {
      return this.imageSrc
    },
    _height (): number {
      return this.height
    },
    _width (): number {
      return this.width
    },
    _alt (): string {
      return this.alt
    }
  }
})
</script>

<style lang="scss">
.banner_int{ position:relative; padding: 50px 0 30px;
  img.img_banner_bg {//@extend %image_bg;@media (max-width: $breakpoint-mobile) {display:none;}
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;
    &.hide64 {
      opacity: 0;
    }
  }
  .banner_topo_conteudo{//@extend %center_vertical; min-height: 325px;
    .banner_topo_conteudo_wrapper{ position:relative;
      .banner_topo_conteudo_left {
        img{ margin-bottom: 20px;}
        width:50%; float:left;
        //@media (max-width: $breakpoint-mobile) {width: 100%;}
      }
    }
  }
}
</style>
