diff --git a/front-end/src/App.vue b/front-end/src/App.vue
index 3b6dabb..be61929 100644
--- a/front-end/src/App.vue
+++ b/front-end/src/App.vue
@@ -1,9 +1,8 @@
 <template>
   <div class="home">
-    <div class="welcome">
-      <p class="blurb">
-        <span class="title">Wabash Arts Corridor</span>
-        <br />
+    <header class="welcome">
+      <h1>Explore Chicago’s Wabash Arts Corridor</h1>
+      <p>
         In 2013, Columbia College Chicago launched the Wabash Arts Corridor to immerse students in
         the creative spirit by using urban spaces and reclaimable resources to revitalize and
         transform the South Loop business district into one of the city’s major cultural assets. The
@@ -12,7 +11,7 @@
         urban canvas” due to its ever-growing number of large-scale mural installations and
         collaborative projects.
       </p>
-    </div>
+    </header>
     <main>
       <div id="map-container">
         <LeafletMap
@@ -21,7 +20,7 @@
           :id-references="idReferences"
           :locations-prefetch="locationsPrefetch"
         />
-        <div v-else class="map-placeholder">Loading Map...</div>
+        <div v-else class="map-placeholder">Loading map…</div>
       </div>
       <div id="search-list-container">
         <RouterView v-slot="{ Component }">
@@ -39,7 +38,7 @@
         </RouterView>
       </div>
     </main>
-    <div class="footer">
+    <footer class="footer">
       <div class="footer-blurb">
         <h2>About / Credit</h2>
         <p>
@@ -48,7 +47,7 @@
           collective back.
         </p>
       </div>
-    </div>
+    </footer>
   </div>
 </template>
 
@@ -107,84 +106,50 @@ provide('prefetch', {
 .home {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 64px;
-  position: relative;
-  overflow-y: scroll;
+  gap: var(--wac--semantic-spacing--primary);
 }
 
-.footer {
+.welcome {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 32px;
+  gap: var(--wac--accessible-spacing--halfx);
+  font-size: var(--wac--font-size);
+  line-height: var(--wac--line-height--tight);
+  font-size: var(--wac--font-size--lg);
+  max-width: var(--wac--text--sensible-max-width);
 }
 
-.footer-blurb {
+.footer {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+  gap: var(--wac--accessible-spacing--2x);
+  max-width: var(--wac--text--sensible-max-width);
 }
 
-#map-container {
-  width: 100%;
-}
-
-.welcome {
+.footer-blurb {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  font-size: var(--wac-font-size--med);
+  gap: var(--wac--accessible-spacing--1x);
 }
 
-.title {
-  font-weight: 900;
-  line-height: 120%;
-  color: #000000;
-}
-
-.blurb {
-  font-weight: 400;
-  line-height: 120%;
-  color: #000000;
+main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wac--semantic-spacing--primary);
 }
 
+#map-container,
 #search-list-container {
-  padding-top: 64px;
+  flex-basis: 50%;
 }
 
-@media (min-width: 940px) {
-  .home {
-    padding: 64px 64px;
-
-    gap: 64px;
-    background: #ffffff;
-  }
-
+@media screen and (min-width: 940px) {
   .welcome {
-    gap: 32px;
-    font-size: var(--wac-font-size--xl);
-    max-width: 860px;
+    font-size: var(--wac--font-size--xxl);
   }
 
   main {
-    display: flex;
     flex-direction: row-reverse;
-    align-items: flex-start;
-    width: 80%;
-    height: 100vh;
-    gap: 64px;
-  }
-  #map-container {
-    width: 50%;
-    height: 100%;
-  }
-  #search-list-container {
-    height: 100%;
-    width: 100%;
-    padding-top: 0px;
   }
 }
 </style>
diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
index 0c19c83..169ab23 100644
--- a/front-end/src/assets/base.css
+++ b/front-end/src/assets/base.css
@@ -1,25 +1,115 @@
 :root {
-  --color-black: #363636;
-  --color-white: #ffffff;
-  --font-size-base: 16px;
-  --wac-font-size--small: calc(var(--font-size-base) * 0.75);
-  --wac-font-size--med: var(--font-size-base);
-  --wac-font-size--lg: calc(var(--font-size-base) * 1.25);
-  --wac-font-size--xl: calc(var(--font-size-base) * 1.5);
-  --wac-font-size--xxl: calc(var(--font-size-base) * 2);
-  --wac-font-size--xxxl: calc(var(--font-size-base) * 3);
-  --wac-font-size--xxxxl: calc(var(--font-size-base) * 4);
-}
-
-@media screen and (max-width: 940px) {
-  :root {
-    --font-size-base: 16px;
-  }
+  --wac--font-size: 16px;
+  --wac--font-size--sm: calc(var(--wac--font-size) * 0.75);
+  --wac--font-size--lg: calc(var(--wac--font-size) * 1.25);
+  --wac--font-size--xl: calc(var(--wac--font-size) * 1.5);
+  --wac--font-size--xxl: calc(var(--wac--font-size) * 2);
+  --wac--font-size--xxxl: calc(var(--wac--font-size) * 3);
+  --wac--font-size--xxxxl: calc(var(--wac--font-size) * 4);
+
+  --wac--line-height: 1.4;
+  --wac--line-height--tight: 1.2 --wac--font-weight--normal: 400;
+  --wac--font-weight--bold: 700;
+  --wac--font-weight--xbold: 900;
+
+  --wac--color--gray--dark: #363636;
+  --wac--color--highlight: #ffe16a;
+
+  /* These spacings shouldn't increase with font-size. They have no accessibility impact. */
+  --wac--fixed-spacing--1x: 10px;
+  --wac--fixed-spacing--2x: calc(2 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--3x: calc(3 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--4x: calc(4 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--6x: calc(6 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--8x: calc(8 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--10x: calc(10 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--halfx: calc(var(--wac--fixed-spacing--1x) / 2);
+
+  /* These spacings should increase with font-size. They have an accessibility impact. */
+  --wac--accessible-spacing--1x: 0.625rem;
+  --wac--accessible-spacing--2x: calc(2 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--3x: calc(3 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--4x: calc(4 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--6x: calc(6 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--8x: calc(8 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--10x: calc(10 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--15x: calc(15 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--halfx: calc(var(--wac--accessible-spacing--1x) / 2);
+
+  /* These spacings are not distinct from the above; they're just semantically-defined. */
+  --wac--semantic-spacing--primary: var(--wac--accessible-spacing--8x);
+  --wac--semantic-spacing--secondary: var(--wac--accessible-spacing--4x);
+  --wac--semantic-spacing--tertiary: var(--wac--accessible-spacing--2x);
+
+  --wac--text--sensible-max-width: 60ch;
+  --wac--image--thumbnail-size: var(--wac--accessible-spacing--15x);
+
+  --wac--outline: 2px solid blue;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
 }
 
 body {
-  background-color: var(--color-white);
   font-family: 'Inter Variable', sans-serif;
-  font-size: var(--wac-font-size--med);
-  padding: 20px;
+  font-size: var(--wac--font-size);
+  background-color: white;
+  color: black;
+  padding: var(--wac--semantic-spacing--tertiary);
+
+  transition: padding 200ms;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+  font-weight: var(--wac--font-weight--bold);
+  font-size: inherit;
+}
+
+h1 {
+  font-weight: var(--wac--font-weight--xbold);
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  all: unset;
+
+  font-weight: var(--wac--font-weight--bold);
+  padding: var(--wac--accessible-spacing--halfx);
+
+  transition: background-color 100ms ease;
+  cursor: pointer;
+
+  &.active {
+    background: var(--wac--color--highlight);
+  }
+
+  &:focus-visible {
+    outline: var(--wac--outline);
+  }
+}
+
+@media screen and (min-width: 940px) {
+  :root {
+    --wac--semantic-spacing--primary: var(--wac--accessible-spacing--8x);
+    --wac--semantic-spacing--secondary: var(--wac--accessible-spacing--4x);
+    --wac--semantic-spacing--tertiary: var(--wac--accessible-spacing--2x);
+  }
+
+  body {
+    padding: var(--wac--semantic-spacing--primary);
+  }
 }
diff --git a/front-end/src/components/LeafletMap.vue b/front-end/src/components/LeafletMap.vue
index 6fe713a..6caa65c 100644
--- a/front-end/src/components/LeafletMap.vue
+++ b/front-end/src/components/LeafletMap.vue
@@ -1,11 +1,12 @@
 <template>
-  <div class="expand-map-button" @click="expandMap = !expandMap">
-    <span>Explore the artwork geographically</span>
-    <ChevronDoubleDownIcon v-if="expandMap" class="button-icon" />
-    <ChevronDoubleRightIcon v-else-if="!expandMap" class="button-icon" />
-  </div>
-  <div :class="expandMap ? 'map-container-expanded' : 'map-container-collapsed'">
-    <div id="map" ref="mapElement" />
+  <div :class="expandMap ? 'map-container expanded' : 'map-container collapsed'">
+    <button type="button" class="toggle-map" @click="expandMap = !expandMap">
+      <span>Explore the artwork geographically</span>
+      <ChevronRightIcon class="button-icon" />
+    </button>
+    <div class="map-wrapper">
+      <div id="map" ref="mapElement" />
+    </div>
   </div>
 </template>
 
@@ -16,7 +17,7 @@ import type { Marker } from 'leaflet';
 import type { Tile, CoordinatesTileData, Resource, Prefetch, MapResource } from '@/types';
 import L from 'leaflet';
 import { useRouter, useRoute } from 'vue-router';
-import { ChevronDoubleRightIcon, ChevronDoubleDownIcon } from '@heroicons/vue/24/solid';
+import { ChevronRightIcon } from '@heroicons/vue/24/solid';
 
 const router = useRouter();
 const route = useRoute();
@@ -94,19 +95,26 @@ watch(
 </script>
 
 <style scoped>
-.expand-map-button {
+.map-container {
   display: flex;
+  flex-direction: column;
+}
+
+.toggle-map {
+  display: flex;
+  justify-content: flex-start;
   align-items: center;
-  cursor: pointer;
-  font-weight: 700;
-  padding-bottom: 16px;
+  gap: 0.4ch;
 }
 
 .button-icon {
-  margin-left: 8px;
-  width: 1em;
-  height: 1em;
-  transform: scale(1.2);
+  width: calc(var(--wac--line-height) * 1em);
+  height: calc(var(--wac--line-height) * 1em);
+  transition: transform 100ms ease;
+
+  .expanded & {
+    transform: rotate(90deg);
+  }
 }
 
 #map {
@@ -114,33 +122,35 @@ watch(
   height: 100%;
 }
 
-.map-container-collapsed {
-  height: 200px;
-  transition: height 0.5s ease;
-}
+.map-wrapper {
+  --wac--map-collapsed-height: 90px;
+  --wac--map-expanded-height: 600px;
 
-.map-container-collapsed * {
-  pointer-events: none;
-}
-
-.map-container-expanded {
-  height: 600px;
+  height: var(--wac--map-expanded-height);
   transition: height 0.5s ease;
-}
 
-@media (min-width: 940px) {
-  .map-container-expanded,
-  .map-container-collapsed {
-    height: 100%;
-    transition: none;
+  .collapsed & {
+    height: var(--wac--map-collapsed-height);
+    pointer-events: none;
   }
+}
 
-  .map-container-collapsed * {
-    pointer-events: all;
+@media screen and (min-width: 940px) {
+  .toggle-map {
+    display: none;
   }
 
-  .expand-map-button {
-    display: none;
+  .map-container {
+    position: sticky;
+    top: 0;
+
+    padding-top: var(--wac--semantic-spacing--tertiary);
+    gap: var(--wac--semantic-spacing--tertiary);
+
+    &.collapsed .map-wrapper {
+      height: var(--wac--map-expanded-height);
+      pointer-events: all;
+    }
   }
 }
 </style>
diff --git a/front-end/src/components/MoreArtworksByArtist.vue b/front-end/src/components/MoreArtworksByArtist.vue
index 0f5efd4..bdcccc6 100644
--- a/front-end/src/components/MoreArtworksByArtist.vue
+++ b/front-end/src/components/MoreArtworksByArtist.vue
@@ -61,7 +61,7 @@ const relatedArtworks = artist
 .more-artworks-by-artist-title {
   font-style: normal;
   font-weight: 700;
-  font-size: var(--wac-font-size--med);
+  font-size: var(--wac--font-size);
   line-height: 100%;
 
   color: #000000;
diff --git a/front-end/src/components/ResourceDetail.vue b/front-end/src/components/ResourceDetail.vue
index a692098..4bb8fcd 100644
--- a/front-end/src/components/ResourceDetail.vue
+++ b/front-end/src/components/ResourceDetail.vue
@@ -51,7 +51,7 @@
 .resource-detail-metadata-title {
   font-style: normal;
   font-weight: 700;
-  font-size: var(--wac-font-size--med);
+  font-size: var(--wac--font-size);
   line-height: 100%;
 
   color: #999999;
@@ -60,7 +60,7 @@
 .resource-detail-metadata-content {
   font-style: normal;
   font-weight: 400;
-  font-size: var(--wac-font-size--med);
+  font-size: var(--wac--font-size);
   line-height: 140%;
 
   color: #999999;
@@ -69,14 +69,14 @@
 .resource-detail-header-label {
   font-style: normal;
   font-weight: 400;
-  font-size: var(--wac-font-size--lg);
+  font-size: var(--wac--font-size--lg);
   line-height: 100%;
 }
 
 .resource-detail-header-title {
   font-style: normal;
   font-weight: 900;
-  font-size: var(--wac-font-size--xxl);
+  font-size: var(--wac--font-size--xxl);
   line-height: 100%;
 }
 </style>
diff --git a/front-end/src/components/ResourceDetailItem.vue b/front-end/src/components/ResourceDetailItem.vue
index cad3616..bb884fb 100644
--- a/front-end/src/components/ResourceDetailItem.vue
+++ b/front-end/src/components/ResourceDetailItem.vue
@@ -56,7 +56,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
 .resource-detail-item-header-byline {
   font-style: normal;
   font-weight: 700;
-  font-size: var(--wac-font-size--med);
+  font-size: var(--wac--font-size);
   line-height: 100%;
 
   color: #000000;
@@ -65,7 +65,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
 .resource-detail-item-header-title {
   font-style: normal;
   font-weight: 900;
-  font-size: var(--wac-font-size--xxl);
+  font-size: var(--wac--font-size--xxl);
   line-height: 120%;
   text-decoration-line: underline;
 
@@ -75,7 +75,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
 .resource-detail-item-credit {
   font-style: normal;
   font-weight: 400;
-  font-size: var(--wac-font-size--med);
+  font-size: var(--wac--font-size);
   line-height: 140%;
 
   color: #000000;
diff --git a/front-end/src/components/ResourcePanel.vue b/front-end/src/components/ResourcePanel.vue
index 8d57faa..a69fd85 100644
--- a/front-end/src/components/ResourcePanel.vue
+++ b/front-end/src/components/ResourcePanel.vue
@@ -112,13 +112,4 @@ const isProd = import.meta.env.PROD;
 .resource-detail-back-button {
   cursor: pointer;
 }
-
-@media (min-width: 940px) {
-  .resource-detail {
-    height: 100vh;
-  }
-  .resource-detail {
-    overflow-y: scroll;
-  }
-}
 </style>
diff --git a/front-end/src/components/SearchList.vue b/front-end/src/components/SearchList.vue
index 49d7ac6..4f10e42 100644
--- a/front-end/src/components/SearchList.vue
+++ b/front-end/src/components/SearchList.vue
@@ -40,7 +40,7 @@
       </div>
       <input
         v-model="query"
-        class="search-bar"
+        class="search-input"
         placeholder="Search artwork titles and artist names..."
       />
     </div>
@@ -108,28 +108,27 @@ const filterByType = (type: string) => {
 .search-list-container {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 32px;
-  isolation: isolate;
+  gap: var(--wac--semantic-spacing--secondary);
 }
 
 .search-header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 16px;
+  --wac--search-header--internal-spacing: var(--wac--semantic-spacing--tertiary);
+  position: sticky;
+  top: 0;
 
-  background: linear-gradient(180deg, #ffffff 0%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
-}
-.search-results {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
-  gap: 16px;
-  max-width: 640px;
+  gap: var(--wac--search-header--internal-spacing);
+  padding-block: var(--wac--search-header--internal-spacing);
+
+  background: linear-gradient(
+    180deg,
+    white calc(100% - var(--wac--search-header--internal-spacing)),
+    rgba(255, 255, 255, 0) 100%
+  );
 }
+
 .resource-selection-menu {
   display: flex;
   flex-direction: row;
@@ -137,57 +136,35 @@ const filterByType = (type: string) => {
   justify-content: center;
   align-items: center;
   align-content: space-between;
-  padding: 0px;
-  gap: 8px;
-}
-
-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 8px;
-  gap: 8px;
-  border: none;
-  background: none;
-  font-style: normal;
-  font-weight: 700;
-  font-size: var(--wac-font-size--med);
-  line-height: 100%;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  color: #000000;
-  transition: background-color 300ms ease;
+  gap: var(--wac--accessible-spacing--halfx);
 }
 
-button.active {
-  background: #ffe16a;
-  transition: background-color 300ms ease;
+.search-input {
+  width: 100%;
+  padding: var(--wac--accessible-spacing--1x);
+  border: 2px solid black;
+  border-radius: var(--wac--fixed-spacing--halfx);
+  font-size: inherit;
+
+  &:focus {
+    outline: var(--wac--outline);
+    border-color: blue;
+  }
 }
 
-.search-bar {
-  box-sizing: border-box;
-
+.search-results {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 16px;
-  gap: 16px;
-  width: 100%;
-  background: #ffffff;
-  border: 1px solid #000000;
-  border-radius: 5px;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--wac--semantic-spacing--tertiary);
 }
 
-@media (min-width: 940px) {
+@media screen and (min-width: 940px) {
   .search-list-container {
-    height: 100vh;
+    gap: var(--wac--semantic-spacing--primary);
   }
-  .search-results {
-    overflow-y: scroll;
-    padding-top: 40px;
-    mask-image: linear-gradient(to top, transparent, black 10%, black 90%, transparent);
-    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
+  .search-input {
+    padding: var(--wac--accessible-spacing--2x);
   }
 }
 </style>
diff --git a/front-end/src/components/SearchListItem.vue b/front-end/src/components/SearchListItem.vue
index 13420ec..0141703 100644
--- a/front-end/src/components/SearchListItem.vue
+++ b/front-end/src/components/SearchListItem.vue
@@ -1,30 +1,24 @@
 <template>
   <RouterLink :to="`/resource/${props.resourceId}`" class="search-result-container">
     <div class="search-result">
-      <img
-        v-if="imageUrl"
-        class="search-result-image"
-        loading="lazy"
-        :src="imageUrl"
-        alt="thumbnail image"
-      />
-      <img
-        v-else
-        class="search-result-image"
-        :src="isProd ? '/archesdataviewer/noimage.png' : '/noimage.png'"
-        alt="no image available"
-        loading="lazy"
-      />
-      <div class="search-result-metadata">
-        <div class="search-result-resource-type">{{ props.resourceType ?? 'Resource' }}</div>
-        <div class="search-result-title">{{ props.resourceName }}</div>
+      <div class="metadata">
+        <div class="resource-type">{{ props.resourceType ?? 'Resource' }}</div>
+        <div class="title">{{ props.resourceName }}</div>
         <div
           v-if="props.resourceDescription && props.resourceDescription !== 'Undefined'"
-          class="search-result-resource-description"
+          class="description"
         >
           {{ props.resourceDescription }}
         </div>
       </div>
+      <img v-if="imageUrl" class="image" loading="lazy" :src="imageUrl" alt="thumbnail image" />
+      <img
+        v-else
+        class="image"
+        :src="isProd ? '/archesdataviewer/noimage.png' : '/noimage.png'"
+        alt="no image available"
+        loading="lazy"
+      />
     </div>
   </RouterLink>
 </template>
@@ -50,53 +44,46 @@ const imageUrl = props.imageTileData
 <style scoped>
 .search-result {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 16px;
+  justify-content: flex-end;
+  flex-direction: row-reverse;
+  gap: var(--wac--semantic-spacing--tertiary);
   cursor: pointer;
 }
-.search-result-metadata {
+
+.metadata {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
-  gap: 8px;
-}
-.search-result-title {
-  font-style: normal;
-  font-weight: 900;
-  font-size: var(--wac-font-size--lg);
-  line-height: 120%;
-  display: flex;
-  align-items: center;
-  text-decoration-line: underline;
+  gap: var(--wac--accessible-spacing--halfx);
+
+  line-height: var(--wac--line-height--tight);
 }
-.search-result-resource-type {
-  font-style: normal;
-  font-weight: 400;
-  font-size: var(--wac-font-size--med);
-  line-height: 100%;
 
-  display: flex;
-  align-items: center;
+.title {
+  font-size: var(--wac--font-size--lg);
+  font-weight: var(--wac--font-weight--xbold);
+  text-decoration: underline;
+
+  .search-result-container:hover & {
+    text-decoration: none;
+  }
 }
 
-.search-result-resource-description {
-  font-style: normal;
-  font-weight: 400;
-  font-size: var(--wac-font-size--small);
-  line-height: 120%;
-  display: -webkit-box;
-  -webkit-line-clamp: 5;
-  line-clamp: 5;
+.description {
+  font-size: var(--wac--font-size--sm);
+  margin-top: var(--wac--accessible-spacing--1x);
+
   -webkit-box-orient: vertical;
-  overflow: hidden;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  display: -webkit-box;
   text-overflow: ellipsis;
+  overflow: hidden;
 }
-.search-result-image {
-  width: 150px;
-  height: 150px;
+
+.image {
+  width: var(--wac--image--thumbnail-size);
+  height: var(--wac--image--thumbnail-size);
   object-fit: cover;
   flex-shrink: 0;
 }
@@ -104,16 +91,14 @@ const imageUrl = props.imageTileData
 .search-result-container {
   text-decoration: none;
 }
-@media (min-width: 940px) {
-  .search-result-title {
-    font-size: var(--wac-font-size--xxl);
-  }
-  .search-result-resource-type {
-    font-size: var(--wac-font-size--med);
+
+@media screen and (min-width: 940px) {
+  .title {
+    font-size: var(--wac--font-size--xl);
   }
 
-  .search-result-resource-description {
-    font-size: var(--wac-font-size--small);
+  .description {
+    font-size: var(--wac--font-size);
   }
 }
 </style>