NarrativeIntro.vue

<template>
  <section id="narrativeIntro">
    <div id="grid-container" >
      <div id="text2" class= "text-container" >
        <p v-html="t('text.components.introNarrative.paragraph1')"></p>
        <picture>
          <!-- WebP image sources -->
          <source 
            type="image/webp"
            srcset="
              @/assets/images/responsive_images/security-insecurity_intro_v2-320.webp 320w,
              @/assets/images/responsive_images/security-insecurity_intro_v2-640.webp 640w,
              @/assets/images/responsive_images/security-insecurity_intro_v2-1280.webp 1280w,
              @/assets/images/responsive_images/security-insecurity_intro_v2-1920.webp 1920w"
            sizes="(max-width: 600px) 320px, 
                  (max-width: 1200px) 640px, 
                  (min-width: 1201px) 1280px, 
                  1920px"
          />

          <!-- Fallback to JPG for browsers that don't support WebP -->
          <img
            id="image1"
            srcset="
              @/assets/images/responsive_images/security-insecurity_intro_v2-320.jpg 320w,
              @/assets/images/responsive_images/security-insecurity_intro_v2-640.jpg 640w,
              @/assets/images/responsive_images/security-insecurity_intro_v2-1280.jpg 1280w,
              @/assets/images/responsive_images/security-insecurity_intro_v2-1920.jpg 1920w"
            sizes="(max-width: 600px) 320px, 
                  (max-width: 1200px) 640px, 
                  (min-width: 1201px) 1280px, 
                  1920px"
            src="@/assets/images/responsive_images/security-insecurity_intro_v2-1280.jpg"
            loading="lazy"
            class="img"
            alt="Stylized split image contrasts a vibrant park pond with lush greenery on the left and a dry, barren landscape with exposed docks and a dried-up riverbed on the right, illustrating the impact of water scarcity."
          />
        </picture>
      </div>
      <div id="text3" class= "text-container">
        <p v-html="t('text.components.introNarrative.paragraph2')"></p>
      </div>
    </div>
    <div id="text4" class="text-container">
      <p v-html="t('text.components.introNarrative.paragraph3')"></p>
    </div>
    <div id="text5" class="text-container">
      <p v-html="t('text.components.introNarrative.paragraph4')"></p>
    </div>
  </section>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();


</script>

<style scoped>

grid-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.text-container p {
  width: 100%; /* Ensure text takes the full width of the container */
  max-width: 800px; /* Optional: Limit the width of text for readability */
  margin-bottom: 20px;
  box-sizing: border-box;
  text-align: left;
}

#image1 {
  width: 100%; 
  max-width: 800px; 
  height: auto; 
  box-sizing: border-box;
}
</style>

<style lang="scss">

  #water-hazards-tooltip {
    z-index: 99;
    margin-left: -175px;
  }
  #social-vulnerability-tooltip {
    margin-left: -145px;
  }
</style>