{"version":3,"file":"0kYHZOAr.js","sources":["../../../../storyblok/RelatedPostsDisplay.vue"],"sourcesContent":["<template>\n  <div class=\"related-posts\" :class=\"{ [`bg-${blok.bgColor}`]: blok.bgColor }\">\n    <GridContainer>\n      <GridItem :size-xl=\"10\" :offset-xl=\"1\">\n        <div class=\"header-container\">\n          <h2>{{ blok.title }}</h2>\n          <p v-if=\"blok.description\">{{ blok.description }}</p>\n        </div>\n        <div class=\"related-wrapper\">\n          <PostPreview\n            v-if=\"posts.length\"\n            v-for=\"post in posts\"\n            :post=\"post\"\n            :shadow=\"blok.bgColor ? 'md' : 'sm'\"\n          />\n        </div>\n      </GridItem>\n    </GridContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport BlazeSlider from \"blaze-slider\";\nimport {\n  GridContainer,\n  GridItem,\n  LoadingSpinner,\n  mediaBreakpoints,\n  Scaffold,\n} from \"cja-phoenix\";\nimport { useRelatedPosts } from \"~/composables/storyblok/useRelatedPosts\";\nimport { RelatedPostsDisplayStoryblok } from \"~/types/bloks\";\n\nconst props = defineProps<{ blok: RelatedPostsDisplayStoryblok }>();\n\nconst { posts } = useRelatedPosts(props.blok.category);\n</script>\n\n<style lang=\"scss\" scoped>\n.related-posts {\n  padding: 40px 0;\n\n  .header-container {\n    margin-bottom: 40px;\n    @include blok-header;\n\n    h2 {\n      margin: 0;\n    }\n\n    p {\n      margin: 8px 0 0;\n    }\n  }\n\n  .related-wrapper {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 32px 24px;\n\n    @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      grid-template-columns: repeat(3, 1fr);\n      max-width: none;\n    }\n\n    .post-preview {\n      @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n        flex-basis: calc(50% - 12px);\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","posts","useRelatedPosts"],"mappings":"6YAiCA,MAAMA,EAAQC,EAER,CAAE,MAAAC,CAAM,EAAIC,EAAgBH,EAAM,KAAK,QAAQ"}