<template>
  <a class="news-teaser" :href="url" target="_blank">
    <img class="news-teaser__image" :src="imageUrl">
    <div class="news-teaser__text teaser-text">
      <h4 class="teaser__title small-emph">{{title}}</h4>
      <div class="teaser__date">
        <p>{{date}}</p>
      </div>
    </div>
  </a>
</template>

<script>
  export default {
    props: ['title', 'date', 'imageUrl', 'url']
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .news-teaser {
    display: block;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 10px;

    &__image {
      width: 100px;
    }
  }

  .teaser {
    &__date > p {
      color: $color-text-gray;
      font-family: $sans-serif-font-family;
      font-size: toRem(14px);
    }
  }

</style>
