<template>
    <section
        class="slices-quote"
        :data-slice-type="slice.slice_type"
        :data-slice-variation="slice.variation"
    >
        <div class="quote-wrap">
            <blockquote class="quote q1">{{ slice.primary.text }}</blockquote>
            <span class="attribution">
                &mdash;&nbsp;{{ slice.primary.attribution }}
            </span>
        </div>
    </section>
</template>

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

<style lang="scss">
.slices-quote {
    margin-top: desktop-size(50px);
    margin-bottom: desktop-size(50px);

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

        .attribution {
            display: block;
            margin-top: desktop-vw(13px);
        }
    }

    @include mobile {
        margin-top: mobile-size(50px);
        margin-bottom: mobile-size(50px);

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

            .attribution {
                margin-top: mobile-vw(13px);
            }
        }
    }
}
</style>
