ConclusionSection.vue

<template>
  <section id="socialVulnerabilityText">
      <div
    id="title"
    class="text-container title-text"
  >
    <h3 v-html="t('text.components.socialVulnerabilityText.title')"></h3>
    <br>
      <div id="text1" class="text-container">
        <p v-html="t('text.components.socialVulnerabilityText.paragraph1')"></p>
      </div>
      <img src="@/assets/images/original_images/security-insecurity-transition.png" loading="lazy" class="img" alt="Artistic rendering of an agricultural landscape with abundant water blending into a barren landscape where water is scarce."/>
      <div id="text2" class="text-container">
        <p v-html="t('text.components.socialVulnerabilityText.paragraph2')"></p>
      </div>
    </div> 
  </section>
</template>
  
<script setup>
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();
</script>
  
<style scoped>
  .text-container {
    margin-bottom: 20px; 
  }
  
  #socialVulnerabilityText img {
    display: block;
    margin: 20px auto; /* Center the images and add space around them */
  }
</style>

<style lang="scss">
  #intersectionality-tooltip {
    margin-left: -100px;
  }
  #meta-analysis-tooltip {
    margin-left: -100px;
    z-index: 99;
  }
  #environmental-justice-tooltip {
    margin-left: -160px;
  }
</style>