51 lines
1014 B
Vue
51 lines
1014 B
Vue
<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>
|