VizTitle.vue

<template>
  <header id="grid-container">
    <div 
      id="title-container"
      :class="{ mobile: mobileView}"
    >
      <img
        id="title-image"
        :class="{ mobile: mobileView}"
        src="@/assets/images/hero_img_photo-cutout_feather.png"
        alt="Social vulnerability and water insecurity"
      >
      <div id="image-caption">
        <p style="font-size: 60px;"><strong>Unequal access to water</strong></p>
        <p style="font-size: 38px; margin-top: 10px">How societal factors shape exposure to water-related hazards,<br>likelihood to suffer harm, and ability to cope and recover from losses</p>
      </div>
    </div>
    <div 
      id="intro-container"
      :class="{ mobile: mobileView}"
    > 
    </div>
  </header>
</template>

<script>
  import { isMobile } from 'mobile-device-detect';

  export default {
    name: "VizTitle",
    components: {
    },
    props: {
      data: Object
    },
    data() {
      return {
        publicPath: import.meta.env.BASE_URL, // find the files when on different deployment roots
        mobileView: isMobile, // test for mobile
      }
    },
    mounted(){      
      const self = this; 
    }
  }
</script>

<style lang="scss" scoped>
#grid-container {
  display: grid;
  padding: 20px 0 20px 0;
  gap: 5px;
  grid-template-columns: 65vw 25vw;
  grid-template-rows: max-content max-content max-content max-content;
  grid-template-areas:
    "title title"
    "intro intro";
  justify-content: center;
  margin: auto;
  max-width: 90vw;
  min-width: 90vw;
  @media screen and (max-width: 600px) {
    padding: 0px 0 20px 0;
    grid-template-columns: 100%;
    grid-template-rows: max-content max-content max-content max-content max-content;
    grid-template-areas:
      "title"
      "intro"
  }
}
#title-container {
  grid-area: title;
  text-align: center; /* Center the content horizontally */
}

#title-image {
  max-width: 75%; /* Ensure the image doesn't exceed the width of its container */
  margin: auto; /* Center the image horizontally */
}

#title-image.mobile {
  width: 100%; /* Ensure the image takes up the full width on mobile */
}

#image-caption {
  font-family: 'Source Sans Pro', sans-serif; /* Set the font family */
  margin-top: -10px; /* Add space between the image and the caption */
}

#image-caption strong {
  font-weight: bold; /* Set the text to bold */
}

#intro-container {
  grid-area: intro;
  padding: 5px 0px 0px 5px;
  @media screen and (max-width: 600px) {
    padding: 1px 0px 0px 5px;
  }
}
</style>