Maps.vue

<template>
  <section id="map">
    <div
      id="title"
      class="text-container title-text"
    >
      <h3>Case studies across the Western states</h3>
      <p>Orange = Positively correlated to water insecurity conditions</p>
  <p>Blue = Negatively correlated to water insecurity conditions</p><br>
      <img src="@/assets/images/tot_households_2022.png" alt="Map of total households 2022">
      <img src="@/assets/images/tot_female_households_2022.png" alt="Map of total female led households 2022">
      <img src="@/assets/images/med_income_census_2022.png" alt="Map of median income 2022">
      <img src="@/assets/images/median_rent_2022.png" alt="Map of median rent 2022">
      <img src="@/assets/images/tot_latino_census_2022.png" alt="Map of total latino population 2022">
      <img src="@/assets/images/perc_latino_census_2022.png" alt="Map of percent latino population 2022"><br><br>
      Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States. Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use. 
</div>
      <!-- <h3 v-html="mapsText.title"/> -->
    <div id="map-container"></div>
    <!-- <div
      id="text1"
      class="text-container"
    >
      <p v-html="mapsText.paragraph1"/>
    </div> -->
  </section>
</template>

<script>
  import { onMounted, ref } from "vue";
  import { isMobile } from 'mobile-device-detect';
  import * as d3 from 'd3';
  import mapText from './../assets/text/mapText';

  // global variables
  const mobileView = isMobile;
  const mapsText = mapText.mapText;

</script>

<style scoped lang="scss">
  #grid-container-interactive {
    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"
      "text text"
      "map legend";
    justify-content: center;
    margin: auto;
    max-width: 90vw;
    min-width: 90vw;
    // @media screen and (max-height: 770px) {
    //   row-gap: 4vh;
    //   margin: 4rem 0rem 5rem 0rem;
    // }
  }

  #grid-title {
    grid-area: title;
    align-self: center;
  }

  #text {
    grid-area: text;
  }

  #map-container {
    pointer-events: none;
    grid-area: map;
    height: 100%;
    max-height: 70vh;
  }


</style>