<template>
  <div class="news-teaser">
    <h4 class="small-emph">
      <a :href="url" target="_blank" class="teaser__title">{{title}}</a>
    </h4>
    <a :href="url" target="_blank" class="teaser__date">
        {{date}}
      </a>
  </div>
</template>

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

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

  .news-teaser {
    display: flex;
    border-left: 1px solid $color-lightgrey-2;
    padding-left: $medium-spacing;
    flex-direction: column;
  }

  .teaser {
    &__title {
      color: $color-white;
      font-family: $sans-serif-font-family;
      font-weight: $font-weight-bold;
      line-height: $default-line-height;
      margin-bottom: $small-spacing;
    }

    &__date {
      color: $color-white;
      font-family: $sans-serif-font-family;
      font-size: toRem(14px);
    }
  }

</style>
