<script lang="ts" setup>
const props = defineProps({
  description: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <section
    id="single-blog"
    class="bg-gradient-odd pt-section px-4 max-2xl:flex max-2xl:flex-col max-2xl:justify-center"
  >
    <div class="container mx-auto">
      <client-only>
        <p class="v-html-prose leading-12" v-html="props.description" />
      </client-only>
    </div>
  </section>
</template>

<style scoped>
.v-html-prose :deep(*) {
  color: currentColor !important;
  font-family: "Almarai", system-ui, sans-serif !important;
  line-height: 1.6 !important;
}
</style>
