<template>
    <div class="strapi-content">
        <strapi-blocks :content="content" />
    </div>
</template>

<script setup>
import { StrapiBlocks } from 'vue-strapi-blocks-renderer'

const props = defineProps({
    content: Array,
})
</script>

<style lang="scss">
.strapi-content {
    > * {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    > *:first-child {
        margin-top: 0 !important;
    }
    > *:last-child {
        margin-bottom: 0 !important;
    }

    pre {
        background: var(--grey);
        border-radius: desktop-vw(2px);
        padding: desktop-vw(20px);
        overflow-x: auto;
    }

    a {
        text-decoration: underline;
    }

    img {
        border-radius: desktop-vw(4px);
        overflow: hidden;
    }

    @include mobile() {
        pre {
            padding: mobile-vw(20px);
            border-radius: mobile-vw(8px);
            max-width: calc(100vw - (6 * var(--layout-margin)));
        }
        img {
            border-radius: mobile-vw(8px);
        }
    }
}
</style>
