diff --git a/src/components/MapsSection.vue b/src/components/MapsSection.vue
index 356100941d39b431685670707a52367008762f2d..2d465e44391ebd8718d14ea5016e77e8ac3bbc7c 100644
--- a/src/components/MapsSection.vue
+++ b/src/components/MapsSection.vue
@@ -7,45 +7,163 @@
<h3 v-html="t('text.components.mapText.title')"></h3>
<br>
<div class="accordion-container">
- <button class="accordion households-accordion active"><span v-html="t('text.components.mapText.p1Title')"></span><span class="symbol">-</span></button>
+
+ <!-- Accordion 1 -->
+ <button class="accordion households-accordion active">
+ <span v-html="t('text.components.mapText.p1Title')"></span><span class="symbol">-</span>
+ </button>
<div class="panel households-panel">
<p v-html="t('text.components.mapText.paragraph1')"></p>
- <img src="@/assets/images/original_images/avg_household_size_2022_en.png" alt="Choropleth map of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) (U.S. Census Bureau, 2022).">
+ <picture>
+ <source
+ type="image/webp"
+ srcset="
+ @/assets/images/responsive_images/avg_household_size_2022_en-320.webp 320w,
+ @/assets/images/responsive_images/avg_household_size_2022_en-640.webp 640w,
+ @/assets/images/responsive_images/avg_household_size_2022_en-1280.webp 1280w,
+ @/assets/images/responsive_images/avg_household_size_2022_en-1920.webp 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ />
+ <img
+ srcset="
+ @/assets/images/responsive_images/avg_household_size_2022_en-320.jpg 320w,
+ @/assets/images/responsive_images/avg_household_size_2022_en-640.jpg 640w,
+ @/assets/images/responsive_images/avg_household_size_2022_en-1280.jpg 1280w,
+ @/assets/images/responsive_images/avg_household_size_2022_en-1920.jpg 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ src="@/assets/images/responsive_images/avg_household_size_2022_en-1280.jpg"
+ alt="Choropleth map of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) (U.S. Census Bureau, 2022)."
+ />
+ </picture>
<figcaption><p v-html="t('text.components.mapText.caption1')"></p></figcaption>
</div>
- <button class="accordion latino-accordion"><span v-html="t('text.components.mapText.p4Title')"></span><span class="symbol">+</span></button>
+ <!-- Accordion 2 -->
+ <button class="accordion latino-accordion">
+ <span v-html="t('text.components.mapText.p4Title')"></span><span class="symbol">+</span>
+ </button>
<div class="panel">
<p v-html="t('text.components.mapText.paragraph4')"></p>
- <img src="@/assets/images/original_images/perc_hispanic_census_2022_en.png" alt="Choropleth map of percent of Hispanic populations at the county-level across the contiguous U.S.. The greatest percent Hispanic were in Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%) (U.S. Census Bureau, 2022).">
+ <picture>
+ <source
+ type="image/webp"
+ srcset="
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-320.webp 320w,
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-640.webp 640w,
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.webp 1280w,
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-1920.webp 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ />
+ <img
+ srcset="
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-320.jpg 320w,
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-640.jpg 640w,
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.jpg 1280w,
+ @/assets/images/responsive_images/perc_hispanic_census_2022_en-1920.jpg 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ src="@/assets/images/responsive_images/perc_hispanic_census_2022_en-1280.jpg"
+ alt="Choropleth map of percent of Hispanic populations at the county-level across the contiguous U.S.. The greatest percent Hispanic were in Kenedy County, Texas (96.6%), Starr County, Texas (96.2%) and Webb County, Texas (95.4%) (U.S. Census Bureau, 2022)."
+ />
+ </picture>
<figcaption><p v-html="t('text.components.mapText.caption4')"></p></figcaption>
</div>
- <button class="accordion disability-accordion"><span v-html="t('text.components.mapText.p5Title')"></span><span class="symbol">+</span></button>
+ <!-- Accordion 3 -->
+ <button class="accordion disability-accordion">
+ <span v-html="t('text.components.mapText.p5Title')"></span><span class="symbol">+</span>
+ </button>
<div class="panel">
<p v-html="t('text.components.mapText.paragraph5')"></p>
- <img src="@/assets/images/original_images/perc_disabled_census_2022_en.png" alt="Choropleth map of percent with a disability of total civilian noninstitutionalized population at the county-level across the contiguous U.S.. The greatest percent disabled were in Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%) (U.S. Census Bureau, 2022).">
+ <picture>
+ <source
+ type="image/webp"
+ srcset="
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-320.webp 320w,
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-640.webp 640w,
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-1280.webp 1280w,
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-1920.webp 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ />
+ <img
+ srcset="
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-320.jpg 320w,
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-640.jpg 640w,
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-1280.jpg 1280w,
+ @/assets/images/responsive_images/perc_disabled_census_2022_en-1920.jpg 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ src="@/assets/images/responsive_images/perc_disabled_census_2022_en-1280.jpg"
+ alt="Choropleth map of percent with a disability of total civilian noninstitutionalized population at the county-level across the contiguous U.S.. The greatest percent disabled were in Catron County, New Mexico (41%), Mora County, New Mexico (34%) and Kinney County, Texas (34%) (U.S. Census Bureau, 2022)."
+ />
+ </picture>
<figcaption><p v-html="t('text.components.mapText.caption5')"></p></figcaption>
</div>
- <button class="accordion income-accordion"><span v-html="t('text.components.mapText.p2Title')"></span><span class="symbol">+</span></button>
+ <!-- Accordion 4 -->
+ <button class="accordion income-accordion">
+ <span v-html="t('text.components.mapText.p2Title')"></span><span class="symbol">+</span>
+ </button>
<div class="panel">
<p v-html="t('text.components.mapText.paragraph2')"></p>
- <img src="@/assets/images/original_images/med_income_census_2022_en.png" alt="Choropleth map of median household income in the past 12 months (in 2022 inflation-adjusted dollars) at the county-level across the contiguous U.S.. The greatest median incomes include Santa Clara County, California ($153,792), San Mateo County, California ($149,907) and Marin County, California ($142,019) (U.S. Census Bureau, 2022).">
+ <picture>
+ <source
+ type="image/webp"
+ srcset="
+ @/assets/images/responsive_images/med_income_census_2022_en-320.webp 320w,
+ @/assets/images/responsive_images/med_income_census_2022_en-640.webp 640w,
+ @/assets/images/responsive_images/med_income_census_2022_en-1280.webp 1280w,
+ @/assets/images/responsive_images/med_income_census_2022_en-1920.webp 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ />
+ <img
+ srcset="
+ @/assets/images/responsive_images/med_income_census_2022_en-320.jpg 320w,
+ @/assets/images/responsive_images/med_income_census_2022_en-640.jpg 640w,
+ @/assets/images/responsive_images/med_income_census_2022_en-1280.jpg 1280w,
+ @/assets/images/responsive_images/med_income_census_2022_en-1920.jpg 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ src="@/assets/images/responsive_images/med_income_census_2022_en-1280.jpg"
+ alt="Choropleth map of median household income in the past 12 months (in 2022 inflation-adjusted dollars) at the county-level across the contiguous U.S.. The greatest median incomes include Santa Clara County, California ($153,792), San Mateo County, California ($149,907) and Marin County, California ($142,019) (U.S. Census Bureau, 2022)."
+ />
+ </picture>
<figcaption><p v-html="t('text.components.mapText.caption2')"></p></figcaption>
</div>
- <button class="accordion renters-accordion"><span v-html="t('text.components.mapText.p3Title')"></span><span class="symbol">+</span></button>
+ <!-- Accordion 5 -->
+ <button class="accordion renters-accordion">
+ <span v-html="t('text.components.mapText.p3Title')"></span><span class="symbol">+</span>
+ </button>
<div class="panel">
<p v-html="t('text.components.mapText.paragraph3')"></p>
- <img src="@/assets/images/original_images/median_rent_2022_en.png" alt="Choropleth map of median gross rent at the county-level across the contiguous U.S.. The greatest median gross rents include San Mateo County, California ($2,805), Santa Clara County, California ($2,719) and Marin County, California ($2,487) (U.S. Census Bureau, 2022)">
+ <picture>
+ <source
+ type="image/webp"
+ srcset="
+ @/assets/images/responsive_images/median_rent_2022_en-320.webp 320w,
+ @/assets/images/responsive_images/median_rent_2022_en-640.webp 640w,
+ @/assets/images/responsive_images/median_rent_2022_en-1280.webp 1280w,
+ @/assets/images/responsive_images/median_rent_2022_en-1920.webp 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ />
+ <img
+ srcset="
+ @/assets/images/responsive_images/median_rent_2022_en-320.jpg 320w,
+ @/assets/images/responsive_images/median_rent_2022_en-640.jpg 640w,
+ @/assets/images/responsive_images/median_rent_2022_en-1280.jpg 1280w,
+ @/assets/images/responsive_images/median_rent_2022_en-1920.jpg 1920w"
+ sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, (min-width: 1201px) 1280px, 1920px"
+ src="@/assets/images/responsive_images/median_rent_2022_en-1280.jpg"
+ alt="Choropleth map of median gross rent at the county-level across the contiguous U.S.. The greatest median gross rents include San Mateo County, California ($2,805), Santa Clara County, California ($2,719) and Marin County, California ($2,487) (U.S. Census Bureau, 2022)."
+ />
+ </picture>
<figcaption><p v-html="t('text.components.mapText.caption3')"></p></figcaption>
</div>
+
</div>
</div>
</section>
</template>
+
<script setup>
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';