<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";
  @import "@/styles/_mixins.scss";

  .news-teaser {
    display: flex;
    border-bottom: 1px solid $color-silver-light;
    padding-bottom: $large-spacing;
    text-align: center;

    @include desktop {
      border-bottom: 0;
      border-left: 1px solid $color-silver-light;
      padding-bottom: 0;
      text-align: left;
    }

    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>
