<template>
  <div class="news-teasers">
    <news-teaser
      :key="teaser.id"
      :teaser="teaser"
      class="news-teasers__teaser teaser"
      v-for="teaser in newsTeasers"/>
  </div>
</template>

<script>
  import NewsTeaser from '@/components/news/NewsTeaser';

  import news from '@/mixins/news';

  export default {
    mixins: [news],

    components: {
      NewsTeaser
    },
  };
</script>

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

  $image_height: 254px;

  .news-teasers {
    display: -ms-grid;
    @supports (display: grid) {
      display: grid;
    }
    margin-bottom: $large-spacing;
    grid-gap: $large-spacing;

    @include desktop {
      grid-column-gap: $large-spacing;
      grid-row-gap: $section-spacing;
      grid-template-columns: repeat(auto-fit, minmax(320px, $news-width));
      grid-auto-rows: minmax(400px, auto);
      grid-template-rows: auto auto;
      -ms-grid-columns: $news-width $news-width;
    }
  }
</style>
