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"
      />
      <div id="image-caption">
        <p class="title"><strong>Unequal access to water</strong></p>
        <p class="subtitle">
          How societal factors shape exposure to water-related hazards, 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 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: 20px 0;
  gap: 5px;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "title"
    "intro";
  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;
}

#image-caption {
  font-family: 'Source Sans Pro', sans-serif;
  margin-top: -10px;
}

.title {
  font-size: 60px;
  font-weight: bold;
}

.subtitle {
  font-size: 38px;
  margin-top: 10px;
}

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

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

#intro-container.mobile {
  padding: 1px 0 0 5px; /* Specific padding for mobile view */
}
</style>