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_cutout_less-stylized_feather.png"
        alt="Social vulnerability and water insecurity"
      />
        <h1>Unequal access to water</h1>
        <h3>
          How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses
        </h3>
    </div>
  </header>
</template>

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

const mobileView = ref(isMobile);
</script>

<style lang="scss" scoped>

#grid-container {
  display: grid;
  padding: 0px 0;
  gap: 0px;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "title";
  width: 100vw;
  justify-content: center;
  margin: auto;
  @media screen and (max-width: 600px) {
    padding: 0 0 20px;
    grid-template-columns: 100%;
    grid-template-rows: max-content max-content;
  }
}

#title-container  {
  grid-area: title;
  text-align: center;
}

#title-image {
  width: 100vw;
  max-width: 100%;
  margin: auto;
}

h1, h3 {
  margin-left: 50px; 
  margin-right: 50px; 
  margin-top: 20px;
  text-align: left;  
}

</style>