Maps.vue

<template>
  <section id="map">
    <div id="grid-container-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>
      </div>

      <div id="map-images" class="img-container">
        <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">
      </div>

      <div id="description" class="text-container">
        <p>
          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.
        </p>
      </div>
    </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';

export default {
  name: "MapSection",
  components: {},
  data() {
    return {
      mobileView: isMobile,
      mapsText: mapText.mapText
    };
  },
  mounted() {
    const self = this;
  }
};
</script>

<style scoped lang="scss">
#grid-container-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "title"
    "map-images"
    "description"
    "map-container";
  justify-content: center;
  max-width: 90vw;
  margin: auto;
  display: grid;
  padding: 20px 0 20px 0;
  gap: 5px;
  margin: 0rem auto 3rem auto;
  max-width: 90vw;
  min-width: 90vw;
}

#title {
  grid-area: title;
  margin: 1rem 0;
  text-align: center; 
  max-width: 90vw;
  margin: auto;
  display: grid;
    padding: 20px 0 20px 0;
    gap: 5px;
    margin: auto;
    max-width: 90vw;
    min-width: 90vw;
}

#map-images {
  grid-area: map-images;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 5rem 0;
}

.img-container img {
  width: 100%;
  max-width: 35%;
}

#description {
  grid-area: description;
}

</style>