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

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

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>
