<template>
  <section id="socialVulnerabilityText">
      <div
    id="title"
    class="text-container title-text"
  >
    <h3><p v-html="conclusionText.title"></p></h3>
    <br>
      <div id="text1" class="text-container">
        <p v-html="conclusionText.paragraph1"></p>
      </div>
      <img src="@/assets/images/intersectionality_alaskan-elders.png" class="img" />
      <div id="text2" class="text-container">
        <p v-html="conclusionText.paragraph2"></p>
      </div>
      <div id="text3" class="text-container">
        <p v-html="conclusionText.paragraph3"></p>
      </div>
    </div> 
  </section>
</template>
  
<script setup>
  import text from './../assets/text/text.js';
  
  const conclusionText = text.components.socialVulnerabilityText;
</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>