<template>
    <section
        class="slices-content"
        :data-slice-type="slice.slice_type"
        :data-slice-variation="slice.variation"
    >
        <prismic-rich-text class="body entry" :field="slice.primary.body" />
    </section>
</template>

<script setup>
import PrismicRichText from '@/components/prismic/RichText.vue'

const props = defineProps({
    slice: Object,
})
</script>

<style lang="scss">
.slices-content {
    margin-top: desktop-vw(31px);
    margin-bottom: desktop-vw(31px);

    .body {
        width: desktop-vw(640px);
        margin: auto;

        h2 {
            text-align: center;
            margin-bottom: desktop-vw(31px);
            @include h5;
        }
        p,
        a,
        ul {
            text-transform: none;
        }
        p {
            text-align: justify;
        }
    }

    @include mobile {
        margin-top: mobile-vw(31px);
        margin-bottom: mobile-vw(31px);

        .body {
            width: 100%;
            padding: 0 var(--layout-margin);

            h2 {
                margin-bottom: mobile-vw(31px);
            }
        }
    }
}
</style>
