<template>
  <div class="bottom-banner banner-background akkurat-bold" :style="'background-image: url('+ imgSource +')'">
    <h4 v-if="title.length > 0" class="akkurat-light-regular">{{ title }}</h4>
  </div>
</template>

<script>
export default {
  name: 'bottom-banner',
  props: {
    title: {
      type: String,
      default: () => {
        return '';
      }
    },
    imgSource: {
      type: String,
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';

.bottom-banner {
  border-radius: $middle-border-radius;
  box-shadow: $banner-box-shadow;
  height: 300px;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center;
}

h4{
  width: 100%;
  padding: 5px;
  border-radius: $middle-border-radius $middle-border-radius 0 0;
  background: $theme-color-blue;
  color: #fff;
}
</style>
