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/intersectionality_alaskan-elders.png" class="img" />
        <div class="source-info" style="font-size: 0.8em; color: #555; margin-top: -10px; text-align: right;">
          <a href='https://www.usgs.gov/media/images/alaskan-elders' target='_blank'>Alaskan Elders | U.S. Geological Survey</a>
          </div>
      <div id="text2" class="text-container">
        <p v-html="t('text.components.socialVulnerabilityText.paragraph2')"></p>
      </div>
      <div id="text3" class="text-container">
        <p v-html="t('text.components.socialVulnerabilityText.paragraph3')"></p>
      </div>
    </div> 
  </section>
</template>
  
<script setup>
  import { useI18n } from 'vue-i18n';

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

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