diff --git a/assets/img/minus-circle.svg b/assets/img/minus-circle.svg
new file mode 100644
index 00000000..2703cc89
--- /dev/null
+++ b/assets/img/minus-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <circle cx="8" cy="8" r="7.25" stroke="black" stroke-width="1.5"/>
+  <path d="M4.5 8H11.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/assets/img/plus.svg b/assets/img/plus.svg
new file mode 100644
index 00000000..5a7726bf
--- /dev/null
+++ b/assets/img/plus.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8 1.5V14.5M1.5 8H14.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/blocks/bacom-elastic-carousel/bacom-elastic-carousel.css b/blocks/bacom-elastic-carousel/bacom-elastic-carousel.css
index fa33bebd..717071de 100644
--- a/blocks/bacom-elastic-carousel/bacom-elastic-carousel.css
+++ b/blocks/bacom-elastic-carousel/bacom-elastic-carousel.css
@@ -1,512 +1,352 @@
-/* Migrated verbatim from source repo (c2-block-migration branch); style violations left as-is pending reconciliation with this repo's conventions. */
-/* stylelint-disable */
-
-/** main classes */
-
-html[dir="rtl"] {
-  .bacom-elastic-carousel {
-    & .elastic-carousel-container {
-      & .elastic-carousel-item {
-        & .elastic-carousel-item-footer {
-          &:after {
-            transform: rotate(180deg);
-            left: 0;
-            right: unset;
-          }
-        }
-
-        & .elastic-carousel-item-header {
-          &:after {
-            transform: rotate(180deg);
-            left: 0;
-            right: unset;
-          }
-        }
-      }
-    }
-  }
-}
+/* stylelint-disable no-descending-specificity */
 
 .bacom-elastic-carousel {
-  --elastic-carousel-transtions: all .5s ease;
-  --elastic-carousel-container-height-desktop: 590px;
-  --elastic-carousel-container-height-tablet: 572px;
-  --elastic-carousel-item-max-width: 294px;
-  --elastic-carousel-item-hover-grow-index: 1.75;
-  --slides: 5;
-  --start-gap: 2.75rem;
-  --end-gap: .25rem;
-  --paralax-easing: cubic-bezier(0.42, 0, 0, 1);
-  --elastic-carousel-container-width: calc((var(--slides) * var(--elastic-carousel-item-max-width)) + (var(--slides) * (var(--end-gap) * 2)));
-
-  height: var(--elastic-carousel-container-height-desktop);
+  --elastic-carousel-item-width: 294px;
+  --elastic-carousel-gap: var(--s2a-spacing-md);
+
   position: relative;
-  overflow: clip;
   margin: auto;
+  background-color: #000;
+}
 
-  .elastic-carousel-container {
-    display: flex;
-    position: absolute;
-    left: 0;
-    transform: translateX(calc(50vw - 50%));
-    transition: transform .5s ease;
-    max-width: var(--elastic-carousel-container-width);
-
-    .elastic-carousel-item {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      text-decoration: none;
-      color: inherit;
-      width: var(--elastic-carousel-item-max-width);
-      max-width: var(--elastic-carousel-item-max-width);
-      background-color: var(--s2a-color-gray-75);
-      border-radius: var(--s2a-border-radius-md);
-      cursor: pointer;
-      will-change: width, max-width;
-      transition: max-width .3s var(--paralax-easing), width .3s var(--paralax-easing), background-color .2s ease;
-      contain: layout;
-
-      .elastic-carousel-item-header {
-        display: flex;
-        flex-direction: row;
-        padding: var(--s2a-spacing-lg);
-        gap: var(--s2a-spacing-md);
-        align-items: center;
-
-        img {
-          width: 24px;
-          height: 24px;
-        }
-
-        p {
-          font-size: var(--s2a-font-size-sm);
-          font-weight: var(--s2a-font-weight-adobe-clean-bold);
-          color: var(--s2a-color-gray-1000);
-          margin: 0;
-          transition: color .1s ease;
-          line-height: var(--s2a-font-line-height-18);
-          display: -webkit-box;
-          line-clamp: 1;
-          box-orient: vertical;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 1;
-          overflow: hidden;
-        }
-      }
-
-      .elastic-carousel-item-media {
-        text-align: center;
-
-        video {
-          border-radius: var(--s2a-border-radius-md);
-          object-fit: cover;
-          height: 394px;
-          width: 100%;
-        }
-      }
-
-      .elastic-carousel-item-footer {
-        display: flex;
-        flex-direction: column;
-        padding: var(--s2a-spacing-lg);
-        max-width: 270px;
-        font-size: var(--s2a-font-size-md);
-        line-height: var(--s2a-font-line-height-16);
-
-        &:after {
-          content: '';
-          display: block;
-          background: url('../../assets/img/arrow-right.svg') no-repeat;
-          width: 24px;
-          height: 24px;
-          margin: var(--s2a-spacing-lg);
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          opacity: 0;
-          transition: none;
-        }
-
-        :is(h1, h2, h3, h4, h5, h6) {
-          /* TODO: remove eyebrow styles if eyebrow class is applied directly to footer headline */
-          font-family: var(--body-font-family);
-          font-size: var(--s2a-typography-font-size-eyebrow);
-          font-weight: var(--s2a-font-weight-adobe-clean-bold);
-          line-height: var(--s2a-typography-line-height-eyebrow);
-          letter-spacing: var(--s2a-typography-letter-spacing-eyebrow);
-          margin: 0 0 var(--s2a-spacing-2xs) 0;
-          transition: color .1s ease;
-          display: -webkit-box;
-          line-clamp: 1;
-          box-orient: vertical;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 1;
-          overflow: hidden;
-        }
-
-        p {
-          opacity: .6;
-          margin: 0;
-          transition: color .1s ease;
-          display: -webkit-box;
-          line-clamp: 2;
-          box-orient: vertical;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-        }
-      }
-    }
-  }
+.bacom-elastic-carousel .elastic-carousel-container {
+  display: flex;
+  gap: var(--elastic-carousel-gap);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  padding-top: 56px;
 }
 
+.bacom-elastic-carousel .elastic-carousel-container::-webkit-scrollbar {
+  display: none;
+}
 
-/** custom media rules */
-@media (768px <= width < 1700px) {
-  .elastic-carousel-container {
-    left: 50%;
-    transform: translateX(-50%);
+.bacom-elastic-carousel .elastic-carousel-item-wrap {
+  display: contents;
+}
 
-    &.stick-left {
-      transform: translateX(0);
-    }
+.bacom-elastic-carousel .elastic-carousel-scrubber {
+  display: none;
+}
 
-    &.stick-right {
-      transform: translateX(calc(100vw - 100%));
-    }
-  }
+.bacom-elastic-carousel .elastic-carousel-item {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  width: var(--elastic-carousel-item-width);
+  max-width: 346px;
+  max-height: 485px;
+  overflow: hidden;
+  scroll-snap-align: start;
+  text-decoration: none;
+  color: inherit;
+  background-color: #FFF;
+  border-radius: var(--s2a-border-radius-md);
+  cursor: pointer;
 }
 
-/** desktop only */
-@media (1280px <= width) {
-  .elastic-carousel-container {
-    max-height: var(--elastic-carousel-container-height-desktop);
+.bacom-elastic-carousel .elastic-carousel-item-container {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  max-width: 346px;
+  overflow: hidden;
+}
 
-    .elastic-carousel-item {
-      width: calc(100vw/calc(var(--slides) - 1));
-    }
-  }
+.bacom-elastic-carousel .elastic-carousel-item-header {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: var(--s2a-spacing-xs);
+  padding: var(--s2a-spacing-lg);
 }
 
-/** tablet only */
-@media (768px <= width < 1280px) {
-  .bacom-elastic-carousel {
-    height: var(--elastic-carousel-container-height-tablet);
+.bacom-elastic-carousel .elastic-carousel-item-header-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--s2a-spacing-md);
+}
 
-    .elastic-carousel-container {
-      height: 100%;
-      max-height: var(--elastic-carousel-container-height-tablet);
+.bacom-elastic-carousel .elastic-carousel-item-header img {
+  width: 24px;
+  height: 24px;
+}
 
-      .elastic-carousel-item {
-        width: calc(100vw / calc(var(--slides) - 1.5));
+.bacom-elastic-carousel .elastic-carousel-item-header-row p {
+  margin: 0;
+  color: var(--s2a-color-gray-1000);
+  font-size: var(--s2a-font-size-sm);
+  font-weight: var(--s2a-font-weight-adobe-clean-bold);
+  line-height: var(--s2a-font-line-height-18);
+}
 
-        .elastic-carousel-item-header {
-          padding: var(--s2a-spacing-md);
-        }
-      }
-    }
-  }
+.bacom-elastic-carousel .elastic-carousel-item-media {
+  flex: 1 1 auto;
+  min-height: 0;
+  text-align: center;
 }
 
-/** tablet up */
-@media (width >= 768px) {
-  .bacom-elastic-carousel {
-    padding: 2px 0;
-
-    &.disable-hover {
-      pointer-events: none;
-    }
-
-    html[dir="rtl"] .elastic-carousel-container {
-      --start-margin: -200px;
-    }
-
-    .elastic-carousel-container {
-      --start-margin: 200px;
-      /** animation */
-      animation: elasticCarouselSlideIn var(--parallax-easing) both;
-      animation-timeline: view();
-      animation-range: entry 20% exit 100%;
-
-      .elastic-carousel-item {
-
-        &:nth-child(2) {
-          --start-gap: 2.25rem;
-        }
-
-        &:nth-child(3) {
-          --start-gap: 1.75rem;
-        }
-
-        &:nth-child(4) {
-          --start-gap: 1rem;
-        }
-
-        &:nth-child(5) {
-          --start-gap: .5rem;
-        }
-
-        margin-inline: var(--start-gap);
-        will-change: margin-inline;
-        animation: elasticItemsGapShrink var(--parallax-easing) both;
-        animation-timeline: view();
-        animation-range: entry 0% exit 100%;
-
-        &.hovered,
-        &:focus-visible {
-          background-color: var(--s2a-color-gray-1000);
-          max-width: 496px;
-          width: calc((100vw/calc(var(--slides)))*var(--elastic-carousel-item-hover-grow-index));
-
-          .elastic-carousel-item-footer p,
-          .elastic-carousel-item-header p {
-            color: var(--s2a-color-gray-25);
-          }
-
-          .elastic-carousel-item-footer {
-
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-              color: var(--s2a-color-gray-25);
-            }
-          }
-
-          .elastic-carousel-item-footer:after {
-            opacity: 1;
-            background-color: var(--s2a-color-gray-25);
-            border-radius: var(--s2a-border-radius-round);
-            background-position: 55% 50%;
-            background-size: 8px;
-            position: absolute;
-          }
-        }
-      }
-    }
-  }
+.bacom-elastic-carousel .elastic-carousel-item-media video {
+  display: block;
+  width: 100%;
+  height: 316px;
+  max-height: 316px;
+  object-fit: cover;
+  border-radius: var(--s2a-border-radius-md);
 }
 
-/* mobile only */
-@media (width < 768px) {
-  .bacom-elastic-carousel {
-    --offset-adjuster: 50px;
-    --offset-scale: .85;
-    --last-offset: 2.5rem;
-    --offset-variance-index: -2px;
+/* Hides the badge some browser extensions (e.g. Video Speed Controller) inject onto <video> elements */
+.bacom-elastic-carousel .elastic-carousel-item-media .vsc-controller {
+  display: none;
+}
 
-    height: auto;
-    overflow: visible;
-    padding-bottom: calc(var(--last-offset) * var(--offset-scale));
-    padding-top: calc(var(--offset-adjuster) / var(--slides));
-    margin-inline: var(--s2a-spacing-sm);
-
-    .elastic-carousel-container {
-      top: 0%;
-      height: 100%;
-      position: relative;
-      transform: unset;
-      flex-direction: column;
-      display: grid;
-      gap: 20vh;
-
-      .elastic-carousel-item {
-        position: sticky;
-        top: 18%;
-        width: 100%;
-        max-width: 100%;
-        color: var(--s2a-color-gray-25);
-        background: transparent;
-
-        /** animation */
-        animation: elasticMobileStackSlides var(--paralax-easing) both;
-        animation-timeline: view();
-        animation-range: entry 0% exit 100%;
-
-        /** if we go with dynamic amount of slides, below stuff can be moved to JS */
-        &:nth-child(1) {
-          --stack-offset: calc(var(--last-offset) - (var(--last-offset)/(var(--slides)) * 5) - var(--offset-variance-index) * 5);
-          --stack-contrast: 0;
-          --stack-shrink: 3rem;
-          z-index: 1;
-          animation: elasticMobileStackSlidesIgnoreOpactity var(--paralax-easing) both;
-          animation-timeline: view();
-          animation-range: entry 0% exit 100%;
-        }
-
-        &:nth-child(2) {
-          --stack-offset: calc(var(--last-offset) - (var(--last-offset)/(var(--slides)) * 4) - var(--offset-variance-index) * 4);
-          z-index: 2;
-          --stack-contrast: .25;
-          --stack-shrink: 2.25rem;
-        }
-
-        &:nth-child(3) {
-          --stack-offset: calc(var(--last-offset) - (var(--last-offset)/(var(--slides)) * 3) - var(--offset-variance-index) * 3);
-          z-index: 3;
-          --stack-contrast: .5;
-          --stack-shrink: 1.5rem;
-        }
-
-        &:nth-child(4) {
-          --stack-offset: calc(var(--last-offset) - (var(--last-offset)/(var(--slides)) * 2) - var(--offset-variance-index) * 2);
-          z-index: 4;
-          --stack-contrast: .75;
-          --stack-shrink: .75rem;
-        }
-
-        &:nth-child(5) {
-          --stack-offset: calc(var(--last-offset) - (var(--last-offset)/(var(--slides)) * 1) - var(--offset-variance-index));
-          z-index: 5;
-          --stack-contrast: 1;
-          --stack-shrink: 0rem;
-        }
-
-        &:last-child {
-          height: auto;
-        }
-
-        .elastic-carousel-item-container {
-          position: relative;
-          background-color: var(--s2a-color-gray-1000);
-          border-radius: var(--s2a-border-radius-md);
-          animation: elasticItemsShrink var(--paralax-easing) both;
-          animation-timeline: view();
-          animation-range: entry 0% exit 100%;
-          overflow-x: clip;
-
-          .elastic-carousel-item-header {
-            padding: var(--s2a-spacing-lg);
-            position: relative;
-
-            &:after {
-              content: '';
-              display: block;
-              background: url('../../assets/img/arrow-right.svg') no-repeat;
-              width: 24px;
-              height: 24px;
-              margin: var(--s2a-spacing-lg);
-              position: absolute;
-              right: 0;
-              top: 0;
-              opacity: 1;
-              background-color: var(--s2a-color-gray-25);
-              border-radius: var(--s2a-border-radius-round);
-              background-position: 55% 50%;
-              background-size: 8px;
-              transition: none;
-            }
-
-            p {
-              color: var(--s2a-color-gray-25);
-            }
-          }
-
-          .elastic-carousel-item-media {
-            video {
-              border-radius: var(--s2a-border-radius-0);
-              width: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
+.bacom-elastic-carousel .elastic-carousel-item-footer {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--s2a-spacing-2xs);
+  max-width: 270px;
+  padding: var(--s2a-spacing-lg);
 }
 
+.bacom-elastic-carousel .elastic-carousel-item-title {
+  margin: 0;
+  color: #000;
+  font-family: "Adobe Clean", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 16.8px;
+  letter-spacing: normal;
+  font-synthesis: none;
+}
 
-/** animations */
+.bacom-elastic-carousel .elastic-carousel-item-chevron {
+  display: block;
+  flex: 0 0 auto;
+  width: 6px;
+  height: 12px;
+  background-color: currentcolor;
+  color: #000;
+  mask-image: url('../../assets/img/arrow-right.svg');
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
 
-@keyframes elasticItemsGapShrink {
-  0% {
-    margin-inline: var(--start-gap);
-  }
+.bacom-elastic-carousel .elastic-carousel-item-toggle {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  padding: 16px;
+  border-radius: var(--s2a-border-radius-4, 4px);
+  border: var(--s2a-border-width-sm, 1px) solid var(--s2a-color-transparent-black-08, rgb(0 0 0 / 8%));
+  background: var(--s2a-color-transparent-black-04, rgb(0 0 0 / 4%));
+  color: #000;
+  cursor: pointer;
+}
 
+.bacom-elastic-carousel .elastic-carousel-item-toggle-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-color: currentcolor;
+  mask-image: url('../../assets/img/plus.svg');
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
 
-  40% {
-    margin-inline: var(--end-gap);
-  }
+.bacom-elastic-carousel .elastic-carousel-item-container.expanded .elastic-carousel-item-toggle {
+  border: none;
+  background: var(--s2a-color-gray-1000);
+  color: var(--s2a-color-gray-25);
+}
 
-  100% {
-    margin-inline: var(--end-gap);
-  }
+.bacom-elastic-carousel .elastic-carousel-item-container.expanded .elastic-carousel-item-toggle-icon {
+  mask-image: url('../../assets/img/minus-circle.svg');
 }
 
-@keyframes elasticCarouselSlideIn {
-  0% {
-    margin-left: var(--start-margin);
-    opacity: 0;
-  }
+.bacom-elastic-carousel .elastic-carousel-item-description {
+  display: none;
+  margin: var(--s2a-spacing-2xs) 0 0;
+  overflow: hidden;
+  color: var(--s2a-color-content-body-subtle, rgb(0 0 0 / 64%));
+  font-family: var(--font-family-adobe-clean, "Adobe Clean"), adobe-clean, sans-serif;
+  font-size: var(--s2a-typography-font-size-body-md, 16px);
+  font-weight: 400;
+  line-height: var(--s2a-typography-line-height-body-md, 20px);
+  letter-spacing: var(--s2a-typography-letter-spacing-body-md, 0);
+  text-overflow: ellipsis;
+}
 
-  20% {
-    opacity: 1;
-  }
+.bacom-elastic-carousel .elastic-carousel-item-container.expanded .elastic-carousel-item-description {
+  display: block;
+}
+
+.bacom-elastic-carousel .elastic-carousel-item-container.expanded .elastic-carousel-item-media video {
+  height: 100%;
+  max-height: 316px;
+}
+
+.bacom-elastic-carousel .elastic-carousel-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--s2a-spacing-xs);
+  margin-top: var(--s2a-spacing-xl);
+  padding: 0 var(--s2a-spacing-lg) 104px;
+}
+
+.bacom-elastic-carousel .elastic-carousel-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--s2a-border-radius-round);
+  cursor: pointer;
+}
+
+.bacom-elastic-carousel .elastic-carousel-arrow-prev,
+.bacom-elastic-carousel .elastic-carousel-arrow-next {
+  background-color: #FFF;
+  color: #000;
+}
+
+.bacom-elastic-carousel .elastic-carousel-arrow:disabled {
+  background-color: transparent;
+  border: 1px solid rgb(255 255 255 / 24%);
+  color: rgb(255 255 255 / 40%);
+  cursor: default;
+}
+
+.bacom-elastic-carousel .elastic-carousel-arrow:focus-visible {
+  outline: 2px solid var(--color-accent-focus-ring);
+  outline-offset: 2px;
+}
+
+.bacom-elastic-carousel .elastic-carousel-arrow-icon {
+  display: block;
+  width: 8px;
+  height: 13px;
+  background-color: currentcolor;
+  mask-image: url('../../assets/img/arrow-right.svg');
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.bacom-elastic-carousel .elastic-carousel-arrow-prev .elastic-carousel-arrow-icon {
+  transform: scaleX(-1);
+}
 
-  40% {
-    margin-left: 0;
+@media (width < 768px) {
+  .bacom-elastic-carousel.bacom-elastic-carousel {
+    padding-left: 24px;
+    padding-top: 24px;
+    padding-bottom: 56px;
   }
 
-  100% {
-    margin-left: 0;
-    opacity: 1;
+  .bacom-elastic-carousel {
+    --elastic-carousel-item-width: clamp(294px, 82vw, 394px);
   }
-}
 
-@keyframes elasticMobileStackSlidesIgnoreOpactity {
-  0% {
-    transform: translateY(var(--stack-offset));
-    filter: contrast(1);
-    opacity: 1;
+  .bacom-elastic-carousel .elastic-carousel-item-media video {
+    height: auto;
+    max-height: 316px;
+    aspect-ratio: 4 / 5;
   }
 
-  20% {
-    filter: contrast(1);
-    opacity: 1;
+  .bacom-elastic-carousel .elastic-carousel-container {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    height: calc(485px + 2 * 20px);
+    touch-action: none;
   }
 
-  100% {
-    transform: translateY(calc(var(--stack-offset) - var(--offset-adjuster)));
-    filter: contrast(var(--stack-contrast));
-    opacity: .2;
+  .bacom-elastic-carousel .elastic-carousel-item-wrap {
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: var(--elastic-carousel-item-width);
+    max-width: 346px;
+    margin: 0 auto;
+    border-radius: 16px;
+    box-shadow: 0 -4px 8px 0 rgb(0 0 0 / 15%);
+    transition: top 0.3s ease;
   }
-}
 
-@keyframes elasticMobileStackSlides {
-  0% {
-    transform: translateY(var(--stack-offset));
-    filter: contrast(1);
-    opacity: 0;
+  .bacom-elastic-carousel .elastic-carousel-item-wrap .elastic-carousel-item {
+    width: 100%;
+    max-width: 100%;
+    border-radius: 16px;
+    background: #FFF;
   }
 
+  .bacom-elastic-carousel .elastic-carousel-scrubber {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 8px;
+    bottom: 56px;
+    width: 4px;
+    background: rgb(255 255 255 / 20%);
+    border-radius: var(--s2a-border-radius-round);
+    overflow: hidden;
+  }
 
-  10% {
-    opacity: 1;
+  .bacom-elastic-carousel .elastic-carousel-scrubber-fill {
+    width: 100%;
+    height: 100%;
+    background: #FFF;
+    transform-origin: top;
+    transform: scaleY(0);
   }
 
-  20% {
-    filter: contrast(1);
+  .bacom-elastic-carousel .elastic-carousel-controls {
+    display: none;
   }
+}
 
-  100% {
-    transform: translateY(calc(var(--stack-offset) - var(--offset-adjuster)));
-    filter: contrast(var(--stack-contrast));
+@media (width >= 768px) {
+  .bacom-elastic-carousel {
+    --elastic-carousel-item-width: 394px;
+  }
+}
 
+@media (width >= 769px) and (width < 1280px) {
+  .bacom-elastic-carousel.bacom-elastic-carousel {
+    padding-left: 80px;
   }
 }
 
-@keyframes elasticItemsShrink {
-  0% {
-    margin: 0
+@media (width >= 1280px) {
+  .bacom-elastic-carousel.bacom-elastic-carousel {
+    padding-left: 124px;
   }
 
-  20% {
-    margin: 0
+  .bacom-elastic-carousel .elastic-carousel-controls {
+    padding-right: 118px;
   }
 
-  100% {
-    margin: 0 var(--stack-shrink);
+  .bacom-elastic-carousel .elastic-carousel-item {
+    display: flex;
+    width: 394px;
+    max-width: 346px;
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 16px;
+    background: #FFF;
   }
 }
diff --git a/blocks/bacom-elastic-carousel/bacom-elastic-carousel.js b/blocks/bacom-elastic-carousel/bacom-elastic-carousel.js
index 50c1c4c3..5f9484a0 100644
--- a/blocks/bacom-elastic-carousel/bacom-elastic-carousel.js
+++ b/blocks/bacom-elastic-carousel/bacom-elastic-carousel.js
@@ -3,168 +3,45 @@ import { LIBS } from '../../scripts/scripts.js';
 let decorateBlockText;
 let createTag;
 let getFederatedUrl;
-let sendAnalytics;
 let processTrackingLabels;
 
-const leaveTimeouts = new WeakMap();
-let hoverTracked = false;
-const rewindIntervals = new WeakMap();
-const slideLeaveTimeouts = new WeakMap();
+const MIN_SLIDES_FOR_CONTROLS = 3;
 
 const isSvgUrl = (url) => /\.svg(\?.*)?$/i.test(url || '');
 const isRtl = () => document.documentElement.getAttribute('dir') === 'rtl';
-const isMobile = () => window.innerWidth <= 768;
+const isMobile = () => window.matchMedia('(width < 768px)').matches;
 
 const getCarouselName = (link) => link?.innerText?.split('|')?.[1]?.trim() || 'Adobe slides';
 
-const stopRewind = (video) => {
-  clearInterval(rewindIntervals.get(video));
-  rewindIntervals.delete(video);
-};
-
-const rewindVideo = (video) => {
-  stopRewind(video);
-  video.pause();
-  const startSystemTime = Date.now();
-  const startVideoTime = video.currentTime;
-  const intervalRewind = setInterval(() => {
-    if (video.currentTime === 0) {
-      stopRewind(video);
-      video.load();
-    } else {
-      const elapsed = Date.now() - startSystemTime;
-      video.currentTime = Math.max(startVideoTime - elapsed / 1000, 0);
-    }
-  }, 30);
-  rewindIntervals.set(video, intervalRewind);
-};
+const ARROW_ICON = '<span class="elastic-carousel-arrow-icon"></span>';
 
-const handleMobileAutoplay = (carousel) => {
-  const slides = [...carousel.querySelectorAll('.elastic-carousel-item')];
-  const observers = [];
-
-  slides.forEach((slide, index) => {
-    const video = slide.querySelector('video');
-    if (!video) return;
-
-    const nextSlide = slides[index + 1];
-
-    // Play when this slide enters view — but not if the next slide is already covering it
-    const slideObserver = new IntersectionObserver(
-      ([entry]) => {
-        if (!isMobile()) return;
-        if (entry.isIntersecting) {
-          const nextRect = nextSlide?.getBoundingClientRect();
-          const isCovered = nextRect && nextRect.top < window.innerHeight * 0.7;
-          if (!isCovered) video.play().catch(() => { });
-        }
-      },
-      { threshold: 0.6 },
-    );
-    slideObserver.observe(slide);
-    observers.push(slideObserver);
-
-    if (!nextSlide) return;
-
-    // Rewind when the next slide starts covering this one;
-    // play again when it uncovers (user scrolls back up)
-    const nextSlideObserver = new IntersectionObserver(
-      ([entry]) => {
-        if (!isMobile()) return;
-        if (entry.isIntersecting) {
-          rewindVideo(video);
-        } else {
-          const rect = slide.getBoundingClientRect();
-          if (rect.top >= 0 && rect.top <= window.innerHeight) {
-            video.play().catch(() => { });
-          }
-        }
-      },
-      { threshold: 0.6 },
-    );
-    nextSlideObserver.observe(nextSlide);
-    observers.push(nextSlideObserver);
-  });
-
-  return observers;
-};
-
-const disableHoverOnScroll = (carousel) => {
-  let timer;
-  const controller = new AbortController();
-  window.addEventListener('wheel', () => {
-    clearTimeout(timer);
-    carousel.classList.add('disable-hover');
-    timer = setTimeout(() => {
-      carousel.classList.remove('disable-hover');
-    }, 100);
-  }, { signal: controller.signal });
-  return controller;
-};
-
-const onSlideLeave = (event) => {
-  const video = event?.target?.querySelector('video');
+function attachHoverVideo(item) {
+  const video = item.querySelector('.elastic-carousel-item-media video');
   if (!video) return;
+  const play = () => { video.play().catch(() => {}); };
+  const rewind = () => { video.pause(); video.currentTime = 0; };
+  item.addEventListener('mouseenter', play);
+  item.addEventListener('mouseleave', rewind);
+  item.addEventListener('focus', play);
+  item.addEventListener('blur', rewind);
+}
 
-  clearTimeout(slideLeaveTimeouts.get(video));
-  slideLeaveTimeouts.set(video, setTimeout(() => {
-    rewindVideo(video);
-  }, 100));
-};
-
-const removeHovered = (carousel) => {
-  const slides = carousel?.querySelectorAll('.elastic-carousel-item');
-  [...slides]?.forEach((sld) => sld.classList.remove('hovered'));
-};
-
-const onCarouselLeave = (event) => {
-  const carouselContainer = event.target;
-  clearTimeout(leaveTimeouts.get(carouselContainer));
-  leaveTimeouts.set(carouselContainer, setTimeout(() => {
-    carouselContainer.classList.remove('stick-left', 'stick-right');
-    removeHovered(carouselContainer.closest('.bacom-elastic-carousel'));
-  }, 10));
-};
-
-const onHover = (event) => {
-  const slideEl = event.target;
-  const carouselContainer = slideEl.closest('.elastic-carousel-container');
-  if (!carouselContainer) return;
-  clearTimeout(leaveTimeouts.get(carouselContainer));
-
-  const video = slideEl.querySelector('video');
-  clearTimeout(slideLeaveTimeouts.get(video));
-  slideLeaveTimeouts.delete(video);
-
-  if (video) {
-    stopRewind(video);
-    video.play().catch(() => { });
-  }
-
-  const slideIndex = slideEl.dataset.index * 1;
-  const container = slideEl.parentElement;
-  if (!container) return;
-
-  removeHovered(slideEl.closest('.bacom-elastic-carousel'));
-  slideEl.classList.add('hovered');
-
-  if (isRtl()) {
-    container.classList.toggle('stick-right', slideIndex <= 3);
-    container.classList.toggle('stick-left', slideIndex === 5);
-  } else {
-    container.classList.toggle('stick-left', slideIndex <= 3);
-    container.classList.toggle('stick-right', slideIndex === 5);
-  }
-
-  if (!hoverTracked) {
-    hoverTracked = true;
-    const block = slideEl.closest('[daa-lh]');
-    const blockName = block?.getAttribute('daa-lh');
-    const section = block?.parentElement?.closest('[daa-lh]');
-    const sectionName = section?.getAttribute('daa-lh');
-    sendAnalytics(`user-hover|${sectionName}|${blockName}`);
-  }
-};
+function attachDescriptionToggle(item) {
+  const container = item.querySelector('.elastic-carousel-item-container');
+  const toggle = item.querySelector('.elastic-carousel-item-toggle');
+  if (!container || !toggle) return;
+  toggle.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!container.classList.contains('expanded')) {
+      container.style.height = `${container.getBoundingClientRect().height}px`;
+    }
+    const expanded = container.classList.toggle('expanded');
+    if (!expanded) container.style.height = '';
+    toggle.setAttribute('aria-expanded', String(expanded));
+    toggle.setAttribute('aria-label', expanded ? 'Show less' : 'Show more');
+  });
+}
 
 const buildSlide = ({ slide, index, slidesTotal }) => {
   const children = [...slide.children];
@@ -175,10 +52,16 @@ const buildSlide = ({ slide, index, slidesTotal }) => {
   const icon = iconContainer?.querySelector('img');
   const asset = right.children[0];
   const link = left.lastElementChild?.querySelector('a');
+  const videoUrlMatch = right.textContent.match(/https?:\/\/\S+\.mp4\b/i);
+  const videoSource = videoUrlMatch?.[0] || asset?.dataset.videoSource;
+
+  linkName?.classList.add('elastic-carousel-item-title');
+  description?.classList.add('elastic-carousel-item-description');
 
-  if (asset?.dataset.videoSource) {
+  if (videoSource) {
+    asset.removeAttribute('src');
     asset.setAttribute('preload', 'none');
-    asset.appendChild(createTag('source', { src: asset?.dataset.videoSource, type: 'video/mp4' }));
+    asset.appendChild(createTag('source', { src: videoSource, type: 'video/mp4' }));
     asset.setAttribute('muted', true);
     asset.setAttribute('tabindex', '-1');
     asset.removeAttribute('controls');
@@ -187,31 +70,37 @@ const buildSlide = ({ slide, index, slidesTotal }) => {
   if (isSvgUrl(asset?.src)) asset.src = getFederatedUrl(asset.src);
   if (isSvgUrl(icon?.src)) icon.src = getFederatedUrl(icon.src);
 
-  // TODO: update to ensure classes are mapped to C2 variables
-  // TODO: see if eyebrow class can be applied directly to footer headline
   decorateBlockText(left);
 
+  const headingClass = linkName && [...linkName.classList].find((c) => c.startsWith('heading-'));
+  if (headingClass) linkName.classList.remove(headingClass);
+
   const content = `
     <div class='elastic-carousel-item-container' id='elastic-carousel-slide-${index + 1}'>
       <div class='elastic-carousel-item-header'>
-        ${icon.outerHTML}
-        ${heading?.outerHTML}
+        <div class='elastic-carousel-item-header-row'>
+          ${icon.outerHTML}
+          ${heading?.outerHTML}
+          <button type='button' class='elastic-carousel-item-toggle' aria-expanded='false' aria-label='Show more'>
+            <span class='elastic-carousel-item-toggle-icon'></span>
+          </button>
+        </div>
+        ${description?.outerHTML}
       </div>
       <div class='elastic-carousel-item-media'>
         ${asset.outerHTML}
       </div>
       <div class='elastic-carousel-item-footer'>
         ${linkName?.outerHTML}
-        ${description?.outerHTML}
+        <span class='elastic-carousel-item-chevron'></span>
       </div>
     </div>
   `;
 
   let ariaLabel = `${index + 1} of ${slidesTotal}`;
-  // assign unique aria-label to the first slide
   if (index === 0) ariaLabel = `${getCarouselName(link)}, carousel. ${ariaLabel}`;
 
-  const slideEl = createTag('a', {
+  const item = createTag('a', {
     class: 'elastic-carousel-item',
     tabindex: 0,
     href: link?.href,
@@ -225,22 +114,177 @@ const buildSlide = ({ slide, index, slidesTotal }) => {
     'daa-ll': `${processTrackingLabels(linkName?.textContent)}-${index + 1}--${processTrackingLabels(heading?.textContent)}`,
   }, content);
 
-  slideEl.addEventListener('mouseleave', onSlideLeave);
-  slideEl.addEventListener('mouseenter', onHover);
-  slideEl.addEventListener('focus', onHover);
-  return slideEl;
+  attachHoverVideo(item);
+  attachDescriptionToggle(item);
+
+  item.addEventListener('click', (event) => {
+    if (isMobile() && !event.target.closest('.elastic-carousel-item-footer')) {
+      event.preventDefault();
+    }
+  });
+
+  const wrap = createTag('div', { class: 'elastic-carousel-item-wrap' });
+  wrap.append(item);
+  return wrap;
 };
 
+function updateArrowState(container, prevBtn, nextBtn) {
+  const maxScroll = container.scrollWidth - container.clientWidth;
+  const { scrollLeft } = container;
+  if (isRtl()) {
+    prevBtn.disabled = scrollLeft >= -1;
+    nextBtn.disabled = scrollLeft <= -maxScroll + 1;
+  } else {
+    prevBtn.disabled = scrollLeft <= 1;
+    nextBtn.disabled = scrollLeft >= maxScroll - 1;
+  }
+}
+
+function scrollByCard(container, direction) {
+  const card = container.querySelector('.elastic-carousel-item');
+  if (!card) return;
+  const gap = parseFloat(getComputedStyle(container).columnGap) || 0;
+  const amount = (card.offsetWidth + gap) * direction * (isRtl() ? -1 : 1);
+  container.scrollBy({ left: amount, behavior: 'smooth' });
+}
+
+function buildControls(container) {
+  const controls = createTag('div', { class: 'elastic-carousel-controls' });
+  const prevBtn = createTag('button', {
+    type: 'button',
+    class: 'elastic-carousel-arrow elastic-carousel-arrow-prev',
+    'aria-label': 'Previous',
+  }, ARROW_ICON);
+  const nextBtn = createTag('button', {
+    type: 'button',
+    class: 'elastic-carousel-arrow elastic-carousel-arrow-next',
+    'aria-label': 'Next',
+  }, ARROW_ICON);
+
+  prevBtn.addEventListener('click', () => scrollByCard(container, -1));
+  nextBtn.addEventListener('click', () => scrollByCard(container, 1));
+
+  container.addEventListener('scroll', () => updateArrowState(container, prevBtn, nextBtn));
+  window.addEventListener('resize', () => updateArrowState(container, prevBtn, nextBtn));
+  requestAnimationFrame(() => updateArrowState(container, prevBtn, nextBtn));
+
+  controls.append(prevBtn, nextBtn);
+  return controls;
+}
+
+const STACK_PEEK_HEIGHT = 20;
+const STACK_MAX_PEEKS = 2;
+const STACK_SWIPE_THRESHOLD = 30;
+const STACK_CONTAINER_HEIGHT = 485 + (STACK_MAX_PEEKS * STACK_PEEK_HEIGHT);
+
+function buildScrubber(total) {
+  const scrubber = createTag('div', { class: 'elastic-carousel-scrubber' });
+  const fill = createTag('div', { class: 'elastic-carousel-scrubber-fill' });
+  scrubber.append(fill);
+
+  const update = (index) => {
+    const progress = total > 1 ? index / (total - 1) : 0;
+    fill.style.transform = `scaleY(${Math.min(1, Math.max(0, progress))})`;
+  };
+  update(0);
+
+  return { scrubber, update };
+}
+
+function attachMobileStack(wraps, onIndexChange) {
+  let current = 0;
+
+  const render = () => {
+    wraps.forEach((wrap, i) => {
+      if (!isMobile()) {
+        wrap.style.top = '';
+        return;
+      }
+      const rel = i - current;
+      if (rel > 0) {
+        wrap.style.top = `${STACK_CONTAINER_HEIGHT}px`;
+      } else {
+        const clampedRel = Math.max(rel, -STACK_MAX_PEEKS);
+        wrap.style.top = `${(clampedRel + STACK_MAX_PEEKS) * STACK_PEEK_HEIGHT}px`;
+      }
+    });
+    onIndexChange(current);
+  };
+
+  const goTo = (index) => {
+    current = Math.min(wraps.length - 1, Math.max(0, index));
+    render();
+  };
+
+  render();
+  window.addEventListener('resize', render);
+
+  let startY = null;
+  const onStart = (event) => { if (isMobile()) startY = (event.touches?.[0] ?? event).clientY; };
+  const onEnd = (event) => {
+    if (startY === null) return;
+    const endY = (event.changedTouches?.[0] ?? event).clientY;
+    const delta = startY - endY;
+    startY = null;
+    if (Math.abs(delta) < STACK_SWIPE_THRESHOLD) return;
+    goTo(current + (delta > 0 ? 1 : -1));
+  };
+
+  return { onStart, onEnd, goTo };
+}
+
+function upgradeVideoPreload(carousel) {
+  const videos = [...carousel.querySelectorAll('video')];
+  if (!videos.length) return;
+  const controller = new AbortController();
+  const upgrade = () => {
+    videos.forEach((video) => { video.preload = 'metadata'; });
+    controller.abort();
+  };
+  ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) => {
+    window.addEventListener(event, upgrade, { signal: controller.signal, once: true });
+  });
+}
+
 const decorateCarousel = (carousel) => {
   const slides = [...carousel.children];
   if (isRtl()) slides.reverse();
   const decoratedSlides = slides.map((slide, index) => buildSlide(
     { slide, index, slidesTotal: slides.length },
   ));
+
   const carouselContainer = createTag('div', { class: 'elastic-carousel-container' });
   carouselContainer.append(...decoratedSlides);
+
   carousel.replaceChildren();
   carousel.append(carouselContainer);
+
+  if (slides.length > MIN_SLIDES_FOR_CONTROLS) {
+    carousel.append(buildControls(carouselContainer));
+  }
+
+  const { scrubber, update: updateScrubber } = buildScrubber(decoratedSlides.length);
+  carousel.append(scrubber);
+
+  let currentIndex = 0;
+  const stack = attachMobileStack(decoratedSlides, (index) => {
+    currentIndex = index;
+    updateScrubber(index);
+  });
+  carouselContainer.addEventListener('touchstart', stack.onStart, { passive: true });
+  carouselContainer.addEventListener('touchend', stack.onEnd);
+  carouselContainer.addEventListener('mousedown', stack.onStart);
+  carouselContainer.addEventListener('mouseup', stack.onEnd);
+
+  let wheelCooldown = false;
+  carouselContainer.addEventListener('wheel', (event) => {
+    if (!isMobile() || wheelCooldown) return;
+    event.preventDefault();
+    wheelCooldown = true;
+    setTimeout(() => { wheelCooldown = false; }, 400);
+    stack.goTo(currentIndex + (event.deltaY > 0 ? 1 : -1));
+  }, { passive: false });
+
   carousel.dataset.role = 'group';
   carousel.dataset.ariaRoledescription = 'carousel';
   carousel.dataset.ariaLabel = getCarouselName(slides[0]?.querySelector('a'));
@@ -248,36 +292,10 @@ const decorateCarousel = (carousel) => {
   return carousel;
 };
 
-const upgradeVideoPreload = (carousel) => {
-  const videos = [...carousel.querySelectorAll('video')];
-  if (!videos.length) return;
-  const controller = new AbortController();
-  const upgrade = () => {
-    videos.forEach((video) => { video.preload = 'metadata'; });
-    controller.abort();
-  };
-  ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) => {
-    window.addEventListener(event, upgrade, { signal: controller.signal, once: true });
-  });
-};
-
 export default async function init(el) {
   ({ decorateBlockText } = await import(`${LIBS}/utils/decorate.js`));
   ({ createTag, getFederatedUrl } = await import(`${LIBS}/utils/utils.js`));
-  ({ sendAnalytics } = await import(`${LIBS}/martech/helpers.js`));
   ({ processTrackingLabels } = await import(`${LIBS}/martech/attributes.js`));
 
-  const decoratedCarousel = decorateCarousel(el);
-  upgradeVideoPreload(decoratedCarousel);
-  const scrollController = disableHoverOnScroll(decoratedCarousel);
-  decoratedCarousel.querySelector('.elastic-carousel-container')?.addEventListener('mouseleave', onCarouselLeave);
-  const mobileObservers = handleMobileAutoplay(decoratedCarousel);
-
-  new MutationObserver((_, observer) => {
-    if (!document.contains(el)) {
-      scrollController.abort();
-      mobileObservers.forEach((o) => o.disconnect());
-      observer.disconnect();
-    }
-  }).observe(document.body, { childList: true, subtree: true });
+  upgradeVideoPreload(decorateCarousel(el));
 }