diff --git a/src/assets/js/accordion.js b/src/assets/js/accordion.js
index 46dd17ab1e..2d71438bf1 100644
--- a/src/assets/js/accordion.js
+++ b/src/assets/js/accordion.js
@@ -1,165 +1,126 @@
-(function () {
-  function Accordion(element) {
-    let thisAccordion = this;
-
-    // Get the accordions, and if the accordion group is multiselectable.
-    this.accordions = element.getElementsByClassName("accordion__heading");
-    this.multiSelectible = element.getAttribute('aria-multiselectable') === 'true' || false;
-
-    // For each of the accordions...
-    for (let i = 0; i < this.accordions.length; i++) {
-
-      // Get the accordion item's components.
-      let itemComponents = this.accordionItemComponents(this.accordions[i]);
-
-      // Check if the accordion is currently expanded at moment of click.
-      let expanded = this.isAccordionOpen(itemComponents.btn);
-
-      // If it is, un-hide its corresponding panel.
-      itemComponents.panel.hidden = !expanded;
-
-      // When the accordion's button is clicked...
-      itemComponents.btn.onclick = () => {
-
-        // Toggle the corresponding accordion.
-        this.toggleAccordion(this.accordions[i]);
-      }
-    }
-
-    // Add a listener that listens for when the URL is changed.
-    window.addEventListener('popstate', function (event) {
-
-      // Activate an accordion based upon the hash parameters in the URL.
-      thisAccordion.activateAccordionByHash();
+/**
+ * A class for controlling accordion behavior.
+ */
+class Accordion {
+  constructor(element) {
+
+    // Loop through each accordion item and add a listener for when the accordion is toggled.
+    const accordionItems = element.querySelectorAll('details');
+    Array.prototype.forEach.call(accordionItems, (item) => {
+      // Add a listener for when the details element is toggled.
+      item.addEventListener('toggle', (event) => {
+        this.toggleAccordionItem(item, event.newState === 'open');
+      });
+
+      // Add a listener for when the summary element is clicked.
+      const summary = item.querySelector('summary');
+      summary.addEventListener('click', (event) => {
+        this.accordionItemClick(item);
+      });
     });
-
-    // Activate any accordion that is defined in the hash parameter if there is one.
-    this.activateAccordionByHash();
   }
 
-  // Gets the item components for 'accordion'.
-  // Returns an object that contains 'btn' and 'panel' elements.
-  Accordion.prototype.accordionItemComponents = function (accordion) {
-    let btn = accordion.querySelector('button');
-    let panel = accordion.nextElementSibling;
-
-    return {
-      'btn': btn,
-      'panel': panel
-    }
-  }
-
-  // Define whether 'accordion' is open with 'isOpen'.
-  Accordion.prototype.accordionOpen = function (accordion, isOpen) {
-    // Get the accordion item's components.
-    let itemComponents = this.accordionItemComponents(accordion);
-
-    // Set the relevant attributes for 'accordion' based on 'isOpen'.
-    itemComponents.btn.setAttribute('aria-expanded', isOpen);
-    itemComponents.btn.setAttribute('aria-selected', isOpen);
-    itemComponents.panel.hidden = !isOpen;
+  /**
+   * Handles the click event for an accordion summary element.
+   *
+   * @param accordionItem
+   *   The details element of an accordion item.
+   */
+  accordionItemClick(accordionItem) {
+
+    // Adds a bespoke data attribute to the accordion item
+    // so that we can determine if it was clicked. This is
+    // necessary because the 'click' event if fired before
+    // the 'toggle' event and we don't know if the accordion
+    // item is being opened or closed yet.
+    accordionItem.setAttribute('data-accordion-clicked', true);
   }
 
-  // Activate an 'accordion'.
-  Accordion.prototype.activateAccordion = function (accordion) {
-
-    // Checks if multiple accordions can be open at once. If not, closes other accordions.
-    if (!this.multiSelectible) {
-      this.collapseAllAccordions();
+  /**
+   * Handles the toggle event of an accordion details element.
+   *
+   * @param accordionItem
+   *   The details element of an accordion item.
+   * @param isOpening
+   *   A boolean value indicating the new toggle state.
+   */
+  toggleAccordionItem(accordionItem, isOpening) {
+
+    // Set the relevant attributes for 'accordion' based on 'open'.
+    accordionItem.setAttribute('aria-expanded', isOpening);
+    accordionItem.setAttribute('aria-selected', isOpening);
+
+    // Check if the accordion was clicked.
+    const clicked = accordionItem.getAttribute('data-accordion-clicked');
+    if (clicked) {
+      accordionItem.removeAttribute('data-accordion-clicked');
+
+      // If the accordion is not open (but will be)...
+      if (isOpening) {
+        // Define historyString here to be used later.
+        const historyString = '#' + accordionItem.id;
+
+        // Change window location to add URL params
+        if (window.history && history.pushState && historyString !== '#') {
+          // NOTE: doesn't take into account existing params
+          history.replaceState("", "", historyString);
+        }
+      }
+      // Else if the accordion is closed...
+      else {
+        // Empty the history string.
+        history.replaceState("", "", null);
+      }
     }
-
-    // Open the accordion.
-    this.accordionOpen(accordion, true);
   }
 
-  // Activate any accordion that is defined in the hash parameter if there is one.
-  Accordion.prototype.activateAccordionByHash = function () {
+  /**
+   * Opens an accordion based on the hash in the URL.
+   */
+  static focusAccordionItemByHash() {
 
     // Get the hash parameter.
-    let hash = window.location.hash.substr(1);
+    const hash = window.location.hash.substr(1);
 
     // If the hash parameter is not empty...
     if (hash !== '') {
-
       // Get the accordion to focus.
-      let accordionToFocus = document.getElementById(hash);
+      const hashedAccordionItem = document.getElementById(hash);
 
       // If the defined hash parameter finds an element...
-      if (accordionToFocus !== null) {
-
-        // Get the accordion wrapper of the hash parameter and this accordion wrapper to compare later.
-        let accordionToFocusAccordionWrapper = accordionToFocus.parentElement
-        let accordionWrapper = this.accordions[0].parentElement;
-
-        // If the accordion wrapper defined by the hash and this accordion wrapper are the same...
-        if (accordionToFocusAccordionWrapper === accordionWrapper) {
-
-          // Activate the accordion defined in the hash parameters.
-          this.activateAccordion(accordionToFocus);
+      if (hashedAccordionItem !== null) {
+        // If the summary element is present...
+        const summary = hashedAccordionItem.querySelector('summary');
+        if (summary) {
+          // Trigger click event for summary.
+          summary.click();
         }
       }
     }
   }
+}
+
+/**
+ * Initializes the accordion on each of the specified selectors.
+ *
+ * @param selector
+ */
+function applyAccordion(selector) {
+  const items = document.querySelectorAll(selector);
+
+  Array.prototype.forEach.call(items, (item) => {
+    new Accordion(item);
+  });
+
+  // Add a listener that listens for when the URL is changed.
+  window.addEventListener('popstate', (event) => {
+    // Activate an accordion based upon the hash parameters in the URL.
+    Accordion.focusAccordionItemByHash();
+  });
 
-  // Collapse all accordions in this accordion group.
-  Accordion.prototype.collapseAllAccordions = function () {
-
-    // For each accordion...
-    for (let i = 0; i < this.accordions.length; i++) {
-
-      // Close it.
-      this.accordionOpen(this.accordions[i], false);
-    }
-  }
-
-  // Check if an accordion is open by inspecting the aria attribute of the 'btn' controlling it.
-  // Returns a boolean.
-  Accordion.prototype.isAccordionOpen = function (btn) {
-    return btn.getAttribute('aria-expanded') === 'true' || false;
-  }
-
-  // Toggle a specific 'accordion' open or closed.
-  Accordion.prototype.toggleAccordion = function (accordion) {
-    // Get the accordion's button element.
-    let btn = accordion.querySelector('button');
-
-    // Check if the accordion is currently expanded at moment of click.
-    let expanded = this.isAccordionOpen(btn);
-
-    // Checks if multiple accordions can be open at once. If not, closes other accordions.
-    if (!this.multiSelectible && !expanded) {
-      this.collapseAllAccordions();
-    }
-
-    // Toggle the accordion.
-    this.accordionOpen(accordion, !expanded)
-
-    // If the accordion is not open (but will be)...
-    if (!expanded) {
-
-      // Define historyString here to be used later.
-      let historyString = '#' + btn.parentElement.id;
-
-      // Change window location to add URL params
-      if (window.history && history.pushState && historyString !== '#') {
-        // NOTE: doesn't take into account existing params
-        history.replaceState("", "", historyString);
-      }
-    }
-
-    // Else if the accordion is closed...
-    else {
-
-      // Empty the history string.
-      history.replaceState("", "", " ");
-    }
-  }
-
-  // Instantiate accordions on the page.
-  const accordions = document.getElementsByClassName("accordion");
+  // Activate any accordion that is defined in the hash parameter if there is one.
+  Accordion.focusAccordionItemByHash();
+}
 
-  for (let i = 0; i < accordions.length; i++) {
-    let accordion = new Accordion(accordions[i]);
-  }
-}());
+export { applyAccordion }
 
diff --git a/src/components/accordion/Accordion.stories.js b/src/components/accordion/Accordion.stories.js
index 2dcde48897..ba6a7de8f3 100644
--- a/src/components/accordion/Accordion.stories.js
+++ b/src/components/accordion/Accordion.stories.js
@@ -8,12 +8,6 @@ export default {
       control: 'boolean',
       name: 'Multi select'
     },
-    items: {
-      control: false,
-      table: {
-        disable: true,
-      },
-    },
   },
 };
 
@@ -27,15 +21,17 @@ const Template = (args) => ({
   `,
 });
 
+let items = [
+  { title: 'Brand Bar', content: '<p>The brand bar must appear at the top of all core websites to create immediate association with the university.</p>' },
+  { title: 'Brand Footer', content: '<p>A consistent footer across all web experiences reinforces the connection with Iowa and helps users find important details such as contact information and essential hyperlinks. Footers must appear across all pages of a website.</p>' },
+  { title: 'Logo', content: '<p>Block IOWA logo tab in black, hyperlinked to uiowa.edu. Use the ALT text "University of Iowa homepage."</p>' },
+  { title: 'Favicon', content: '<p>Although small, favicons play an important role in visually unifying web pages. Favicons are the symbols used for browser tabs, bookmarks, or shortcuts pinned to the home screen or desktop of a phone, tablet, or computer.</p>' },
+];
+
 export const Default = Template.bind({});
 Default.args = {
   multiselectable: false,
-  items: [
-    { title: 'Section 1 title', expanded: true, content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>' },
-    { title: 'Section 2 title', content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>' },
-    { title: 'Section 3 title', content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>' },
-    { title: 'Section 4 title', content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>' },
-  ],
+  items: items,
 };
 
 export const MultiSelect = Template.bind({});
@@ -43,3 +39,14 @@ MultiSelect.args = {
   ...Default.args,
   multiselectable: true,
 };
+
+export const OpenByDefault = Template.bind({});
+OpenByDefault.args = {
+  ...Default.args,
+  items: [
+    { open: true, ...items[0] },
+    { ...items[1] },
+    { ...items[2] },
+    { ...items[3] },
+  ],
+};
diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index de8957c721..a05f82017c 100644
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import '../../scss/components/accordion.scss'
-import '../../assets/js/accordion.js'
-import { ref, computed, defineProps } from 'vue';
+import { applyAccordion } from "../../assets/js/accordion.js";
+import '../../assets/js/accordion.js';
+import {ref, computed, defineProps, onMounted} from 'vue';
 
 const props = defineProps({
   multiselectable: {
@@ -14,23 +15,20 @@ const props = defineProps({
   },
 });
 
-const activeIndexes = ref<number[]>([]);
+const itemIds = [];
 
-const toggleAccordion = (index: number) => {
-  if (props.multiselectable) {
-    if (activeIndexes.value.includes(index)) {
-      activeIndexes.value = activeIndexes.value.filter(i => i !== index);
-    } else {
-      activeIndexes.value.push(index);
-    }
-  } else {
-    if (activeIndexes.value.includes(index)) {
-      activeIndexes.value = [];
-    } else {
-      activeIndexes.value = [index];
-    }
+const ariaOwnsIds = () =>{
+  const items = props.items.length;
+  if (items < 1) {
+    return null;
   }
-};
+
+  for(let i = 0; i < props.items.length; i++) {
+    itemIds.push('accordion-heading-' + i);
+  }
+
+  return itemIds.join(' ');
+}
 
 const accordionClasses = computed(() => {
   return {
@@ -38,31 +36,43 @@ const accordionClasses = computed(() => {
     'accordion--multi': props.multiselectable,
   };
 });
+
+onMounted(() => {
+  applyAccordion('.accordion');
+});
+
 </script>
 
 <template>
-  <div :class="accordionClasses" role="tablist" :aria-multiselectable="props.multiselectable">
-  <div v-for="(item, index) in props.items" :key="index" class="accordion__item">
-      <h2 :id="'accordion-heading-' + index" class="accordion__heading">
-        <button
-          class="accordion__button"
-          :aria-expanded="activeIndexes.includes(index)"
-          :aria-controls="'accordion-content-' + index"
-          @click="toggleAccordion(index)"
-        >
+  <div
+    :class="accordionClasses"
+    role="tablist"
+    :aria-owns="ariaOwnsIds()"
+  >
+    <details v-for="(item, index) in props.items"
+      :key="index"
+      class="accordion__item"
+      :aria-labelledby="'accordion-heading-' + index"
+      :name="!props.multiselectable ? 'accordion-collection' : null"
+      :open="item.open"
+      :id="'accordion-item-' + index"
+    >
+      <summary :id="'accordion-heading-' + index" class="accordion__heading"
+        :aria-expanded="item.open ? 'true' : 'false'"
+        :aria-selected="item.open ? 'true' : 'false'"
+        role="tab"
+      >
+        <h2>
           {{ item.title }}
           <i aria-hidden="true" class="fas fa-chevron-up" role="presentation"></i>
-        </button>
-      </h2>
-
+        </h2>
+      </summary>
       <div
         :id="'accordion-content-' + index"
         class="accordion__content"
-        v-show="activeIndexes.includes(index)"
         :aria-labelledby="'accordion-heading-' + index"
-      >
-        <div v-html="item.content"></div>
-      </div>
-    </div>
+        v-html="item.content"
+      ></div>
+    </details>
   </div>
 </template>
diff --git a/src/components/accordion/AccordionDocs.mdx b/src/components/accordion/AccordionDocs.mdx
new file mode 100644
index 0000000000..faeaba5bae
--- /dev/null
+++ b/src/components/accordion/AccordionDocs.mdx
@@ -0,0 +1,33 @@
+import {Meta, Title, Source, Primary, Controls, Stories } from '@storybook/blocks';
+import {version} from '/package.json';
+
+<Meta isTemplate />
+
+<Title />
+
+## Usage
+Make sure you are familiar with the [**Getting Started**](../?path=/docs/introduction#getting-started) guide first.
+
+Add the following files to your project:
+- <strong><a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/components/logo.css`}>logo.css</a></strong>
+- <strong><a href={`https://github.com/uiowa/uids/tree/gh-pages/docs/v${version}/dist/css/components/brand-bar.css`}>brand-bar.css</a></strong>
+
+Refer to the HTML tab for example HTML.
+
+<Primary withSource="none" />
+
+## Inputs
+
+The component accepts the following inputs (props):
+
+<Controls />
+<Source />
+
+---
+
+## Additional variations
+
+Listed below are additional variations of the component.
+
+<Stories />
+
diff --git a/src/components/stat/Stat.stories.js b/src/components/stat/Stat.stories.js
index 8a38b70831..6fa642cc2e 100644
--- a/src/components/stat/Stat.stories.js
+++ b/src/components/stat/Stat.stories.js
@@ -1,5 +1,7 @@
 import UidsStat from './Stat.vue';
 import Background from "../shared/background";
+import UidsGrid from '../grid/Grid.vue';
+import UidsGridItem from '../grid/GridItem.vue';
 
 export default {
   title: 'Components/Stat',
@@ -31,6 +33,9 @@ export default {
       control: 'text',
       name: 'Suffix',
     },
+    stat_hover: {
+      name: 'Hover',
+    },
     ...Background.argTypes,
   },
 };
@@ -51,6 +56,7 @@ Default.args = {
   stat_content: 'Among the top 2% of universities worldwide.',
   stat_prefix: '',
   stat_suffix: '+',
+  stat_hover: true,
 };
 
 export const Horizontal = Template.bind({});
@@ -59,4 +65,45 @@ Horizontal.args = {
   stat_title: '15:1',
   stat_summary: 'student-to-faculty<br /> ratio',
   stat_content: 'Among the top 2% of universities worldwide.',
+  stat_hover: true,
 };
+
+const GridTemplate = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { UidsGrid, UidsGridItem, UidsStat },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args }
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `
+    <div style="padding-top: 2rem; padding-bottom: 2rem;">
+      <uids-grid :type="args.grid_type">
+        <uids-grid-item v-for="item in args.record_count" :key="item">
+          <uids-stat
+            :display="args.display || 'default'"
+            :stat_title="args.stat_title"
+            :stat_summary="args.stat_summary"
+            :stat_content="args.stat_content"
+            :stat_prefix="args.stat_prefix"
+            :stat_suffix="args.stat_suffix"
+            :stat_hover="args.stat_hover"
+          />
+        </uids-grid-item>
+      </uids-grid>
+    </div>
+  `,
+})
+
+export const Grid = GridTemplate.bind({})
+Grid.args = {
+  display: 'default',
+  grid_type: 'threecol--33-34-33',
+  record_count: 6,
+  stat_title: '15:1',
+  stat_summary: 'student-to-faculty ratio',
+  stat_content: 'Among the top 2% of universities worldwide.',
+  stat_prefix: '',
+  stat_suffix: '+',
+  stat_hover: true,
+}
diff --git a/src/components/stat/Stat.vue b/src/components/stat/Stat.vue
index adee7dccf9..325039c64e 100644
--- a/src/components/stat/Stat.vue
+++ b/src/components/stat/Stat.vue
@@ -26,6 +26,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  stat_hover: {
+    type: Boolean,
+    default: true,
+  },
   display: {
     type: String,
     default: 'default',
@@ -39,9 +43,13 @@ const classes = computed(() => {
   Background.addBackgroundClass(classes, props);
 
   if (props.display === 'horizontal') {
-    classes.push('stat--horizontal', 'stat--transform', 'stat__grid');
+    classes.push('stat--horizontal', 'stat__grid');
   } else {
-    classes.push('element--flex-center', 'stat--transform');
+    classes.push('element--flex-center');
+  }
+
+  if (!props.stat_hover) {
+    classes.push('stat--static');
   }
 
   return classes;
@@ -49,7 +57,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <div :class="classes">
+  <div :class="['stat', 'stat__grid', 'stat--transform', ...classes]">
     <div v-if="stat_title">
       <h2 class="stat__title">
         <span v-if="stat_prefix" class="headline__prefix">{{ stat_prefix }}</span>
diff --git a/src/scss/components/accordion.scss b/src/scss/components/accordion.scss
index 3401961499..deedec34af 100644
--- a/src/scss/components/accordion.scss
+++ b/src/scss/components/accordion.scss
@@ -1,72 +1,81 @@
 @use "sass:color";
 @import '../abstracts/variables';
 @import '../abstracts/utilities';
+.accordion__item {
+  &:not(:first-child) {
+    margin-top: 1rem;
+  }
+}
 
 .accordion {
-  .accordion__heading {
-    margin: 0;
-    margin-top: 1rem;
-    font-size: 1rem;
-    font-weight: $font-weight-bold;
+  --trans-time: 0.2s;
+  $accordion-grey: #edeceb;
+  --accordion-grey: #{$accordion-grey};
+
+  summary {
+    list-style: none;
+  }
 
-    &:not(:first-child) {
-      margin-top: 1rem;
+  details {
+    &[open] {
+      i, svg {
+        transform: rotate(0deg) translate(0px, 0.1em);
+        background-color: #fafafa;
+      }
     }
 
-    button {
-      all: inherit;
-      font-size: 1.2rem;
-      width: 100%;
-      background-color: #edeceb;
-      color: $secondary;
-      padding: $md;
+    i, svg {
+      transform: rotate(-180deg) translate(0px, -0.1em);
+      transition: all var(--trans-time) ease-in-out;
+      transition-property: transform, background-color;
+      background-color: transparent;
+      width: $h5-font-size;
+      height: $h5-font-size;
+      padding: 4px;
       display: flex;
-      justify-content: space-between;
-      transition: all 0.2s ease-in-out;
-      transition-property: background-color;
-      cursor: pointer;
-
-      &:focus {
-        outline: 5px auto -webkit-focus-ring-color;
-      }
+      justify-content: center;
+      align-items: center;
+      margin: -0.3rem 0;
+      border-radius: 50%;
+    }
+  }
 
-      i, svg {
-        color: currentColor;
-        transform: rotate(-180deg) translate(0px, -0.1em);
-        transition: all 0.3s ease-in-out;
-        transition-property: transform, background-color;
-        background-color: transparent;
-        width: 30px !important;
-        height: 30px;
-        padding: 4px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: -0.3rem 0;
-        border-radius: 50%;
-      }
+  .accordion__heading h2 {
+    all: inherit;
+    display: flex;
+    font-size: $content-font-size;
+    font-weight: $font-weight-bold;
+    padding: $md;
+    justify-content: space-between;
+    -webkit-justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    width: 100%;
 
-      &:hover, &:focus {
-        background-color: color.scale(#edeceb, $lightness: -4%);
+    &:focus {
+      outline: 2px auto -webkit-focus-ring-color;
+    }
+  }
 
-        i {
-          transform: rotate(-180deg) translate(0px, -0.2em);
-        }
+  summary {
+    width: 100%;
+    background-color: var(--accordion-grey);
+    display: flex;
+    cursor: pointer;
 
-        &[aria-expanded="true"] i, &[aria-expanded="true"] svg {
-          transform: rotate(0deg) translate(0px, 0em);
-        }
-      }
+    &:hover, &:focus {
+      background-color: color.scale($accordion-grey, $lightness: -4%);
+    }
 
-      &[aria-expanded="true"] i, &[aria-expanded="true"] svg {
-        transform: rotate(0deg) translate(0px, 0.1em);
-        background-color: #fafafa;
-      }
+    &::-webkit-details-marker {
+      visibility: hidden;
     }
   }
 
   .accordion__content {
     padding: $md;
-    border: 1px solid #edeceb;
+    border: 1px solid var(--accordion-grey);
   }
 }
+
+
diff --git a/src/scss/components/stat.scss b/src/scss/components/stat.scss
index 04cd4fdb6c..b72206c22c 100755
--- a/src/scss/components/stat.scss
+++ b/src/scss/components/stat.scss
@@ -1,23 +1,39 @@
 @import '../abstracts/variables';
 @import '../abstracts/utilities';
 
+// https://drafts.csswg.org/css-values-5/#interpolate-size.
+:root {
+  interpolate-size: allow-keywords;
+}
+
 .stat__grid {
   margin: 0;
   width: 100%;
   transition: all .55s cubic-bezier(.95, 1.25, .375, 1.15);
 
-  &.stat--transform {
-    &:hover {
+  &.stat--static {
+    &:hover .stat__content {
       @include breakpoint(md) {
-        transform: translateY(-10px);
+        max-height: 100vh;
+      }
+      @include breakpoint(md) {
+        @supports (interpolate-size: allow-keywords) {
+          max-height: max-content;
+          overflow: hidden;
+        }
       }
     }
   }
 
   &:hover .stat__content {
     @include breakpoint(md) {
-      @include element-invisible-off;
-      opacity: 1;
+      max-height: 100vh;
+    }
+    @include breakpoint(md) {
+      @supports (interpolate-size: allow-keywords) {
+        max-height: max-content;
+        overflow: hidden;
+      }
     }
   }
 }
@@ -82,9 +98,17 @@
     line-height: 1.4;
 
     @include breakpoint(md) {
-      opacity: 0;
-      transition: 1s;
-      @include element-invisible;
+      max-height: 0;
+      transition: max-height 0.4s ease-in-out;
+      overflow: hidden;
+    }
+
+    .stat--static & {
+      @include breakpoint(md) {
+        max-height: max-content;
+        transition: none;
+        overflow: unset;
+      }
     }
 
     [class*="bg--black"] &,
@@ -102,7 +126,6 @@
         margin: 0 10%;
       }
     }
-
   }
 
   &__description {
@@ -229,14 +252,10 @@
   margin-bottom: 0rem;
   display: flex;
   flex-wrap: wrap;
-  cursor: pointer;
+  cursor: inherit;
   transition: all .55s cubic-bezier(.95, 1.25, .375, 1.15);
+}
 
-  &.stat--transform {
-    &:hover {
-      @include breakpoint(md) {
-        transform: translateY(-10px) scale(1.02);
-      }
-    }
-  }
+.stat:not(.stat--static) {
+  cursor: pointer;
 }