From 51058b9f3929b9afb6a04edad704d72a924a0e98 Mon Sep 17 00:00:00 2001
From: Patrick Zimmermann <68734204+DriftingSands@users.noreply.github.com>
Date: Mon, 25 Sep 2023 13:49:41 +0200
Subject: [PATCH] Article css issues (#265)

---
 blocks/carousel/carousel.css                 | 257 +++++++--
 blocks/carousel/carousel.js                  | 517 +++++++++++--------
 blocks/courses/courses.css                   |  11 +-
 blocks/default-article/default-article.css   |  21 +-
 blocks/default-article/default-article.js    |  10 +-
 blocks/embed/embed.css                       |   4 +
 blocks/embed/embed.js                        |   1 -
 blocks/full-bleed/full-bleed.css             |   8 +-
 blocks/gallery-listicle/gallery-listicle.css |  14 +-
 blocks/long-form/long-form.css               |  34 +-
 blocks/long-form/long-form.js                |  74 ++-
 blocks/more-cards/more-cards.css             |  10 +-
 blocks/product-listing/product-listing.css   |   2 +-
 blocks/product-listing/product-listing.js    |   2 +-
 blocks/social-share/social-share.css         |   7 +
 scripts/scripts.js                           |   8 +-
 styles/styles.css                            |   5 +
 17 files changed, 655 insertions(+), 330 deletions(-)

diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
index c16e8b8f..a7c76a68 100644
--- a/blocks/carousel/carousel.css
+++ b/blocks/carousel/carousel.css
@@ -195,7 +195,6 @@
   right: -10px;
 }
 
-
 .carousel-wrapper .carousel.block .controls button.left-button {
   transform: rotate(180deg);
 }
@@ -229,12 +228,9 @@
   flex-shrink: 0;
 }
 
-.dark .carousel-wrapper .carousel.block
-  .carousel-main-wrapper
-  .carousel-frame
-  .carousel-item {
- background-color: #1c1c1c;
- border: none;
+.dark .carousel-wrapper .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item {
+  background-color: #1c1c1c;
+  border: none;
 }
 
 .carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item {
@@ -288,18 +284,29 @@
   }
 }
 
-.carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item div.carousel-image-wrapper {
+.carousel-wrapper
+  .carousel.block.wedges
+  .carousel-main-wrapper
+  .carousel-frame
+  .carousel-item
+  div.carousel-image-wrapper {
   aspect-ratio: 1/1;
   margin: 0 0 21px;
 }
 
-.carousel-wrapper .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item div.carousel-image-wrapper {
+.carousel-wrapper
+  .carousel.block.large
+  .carousel-main-wrapper
+  .carousel-frame
+  .carousel-item
+  div.carousel-image-wrapper {
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
-.carousel-wrapper .carousel.block.wedges
+.carousel-wrapper
+  .carousel.block.wedges
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -309,7 +316,13 @@
   object-position: 0% 0%;
 }
 
-.carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item .carousel-image-wrapper picture::before {
+.carousel-wrapper
+  .carousel.block.wedges
+  .carousel-main-wrapper
+  .carousel-frame
+  .carousel-item
+  .carousel-image-wrapper
+  picture::before {
   content: "";
   display: block;
   position: absolute;
@@ -317,7 +330,13 @@
   width: 100%;
 }
 
-.carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item .carousel-image-wrapper picture::after {
+.carousel-wrapper
+  .carousel.block.wedges
+  .carousel-main-wrapper
+  .carousel-frame
+  .carousel-item
+  .carousel-image-wrapper
+  picture::after {
   top: 35%;
   pointer-events: all;
   content: "";
@@ -351,7 +370,13 @@
   }
 }
 
-.carousel-wrapper .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item .carousel-item-wrapper .carousel-image-wrapper {
+.carousel-wrapper
+  .carousel.block
+  .carousel-main-wrapper
+  .carousel-frame
+  .carousel-item
+  .carousel-item-wrapper
+  .carousel-image-wrapper {
   margin: -0.5px;
   width: calc(100% - 1px);
   height: auto;
@@ -360,7 +385,8 @@
   flex-shrink: 0;
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -372,7 +398,8 @@
   width: 100%;
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -392,7 +419,29 @@
   z-index: 1;
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block.auto-carousel
+  .carousel-main-wrapper
+  .carousel-inner-wrapper
+  .carousel-frame
+  .image-wrapper
+  picture,
+.carousel-wrapper
+  .carousel.block.auto-carousel
+  .carousel-main-wrapper
+  .carousel-inner-wrapper
+  .carousel-frame
+  .image-wrapper
+  img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center center;
+  position: static;
+}
+
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item:hover
@@ -402,14 +451,26 @@
   transform: scale(1.2);
 }
 
-.carousel-wrapper .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item .carousel-item-wrapper .carousel-text-content {
+.carousel-wrapper
+  .carousel.block
+  .carousel-main-wrapper
+  .carousel-frame
+  .carousel-item
+  .carousel-item-wrapper
+  .carousel-text-content {
   display: flex;
   flex-direction: column;
   padding: 20px;
   gap: 10px;
 }
 
-.carousel-wrapper .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item .carousel-item-wrapper .carousel-text-content {
+.carousel-wrapper
+  .carousel.block.large
+  .carousel-main-wrapper
+  .carousel-frame
+  .carousel-item
+  .carousel-item-wrapper
+  .carousel-text-content {
   background: linear-gradient(180deg, transparent 50%, #000);
   display: flex;
   position: relative;
@@ -422,7 +483,8 @@
   z-index: 1;
 }
 
-.carousel-wrapper .carousel.block.wedges
+.carousel-wrapper
+  .carousel.block.wedges
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -432,7 +494,8 @@
   padding: 0;
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -448,7 +511,8 @@
   font-family: var(--font-gotham);
 }
 
-.carousel-wrapper .carousel.block.wedges
+.carousel-wrapper
+  .carousel.block.wedges
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -463,7 +527,8 @@
     width: 90%;
   }
 
-  .carousel-wrapper .carousel.block.large
+  .carousel-wrapper
+    .carousel.block.large
     .carousel-main-wrapper
     .carousel-frame
     .carousel-item
@@ -472,7 +537,8 @@
     padding: 18px;
   }
 
-  .carousel-wrapper .carousel.block.large
+  .carousel-wrapper
+    .carousel.block.large
     .carousel-main-wrapper
     .carousel-frame
     .carousel-item
@@ -483,7 +549,8 @@
   }
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -499,7 +566,8 @@
   margin: 0;
 }
 
-.carousel-wrapper .carousel.block.wedges
+.carousel-wrapper
+  .carousel.block.wedges
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -517,7 +585,8 @@
   text-align: center;
 }
 
-.carousel-wrapper .carousel.block.large
+.carousel-wrapper
+  .carousel.block.large
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -535,7 +604,8 @@
   margin: 0;
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -549,7 +619,8 @@
   line-height: 130%;
 }
 
-.carousel-wrapper .carousel.block.large
+.carousel-wrapper
+  .carousel.block.large
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -559,7 +630,8 @@
   display: none;
 }
 
-.carousel-wrapper .carousel.block.wedges
+.carousel-wrapper
+  .carousel.block.wedges
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -569,7 +641,8 @@
   display: none;
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -585,7 +658,8 @@
   margin-top: 6px;
 }
 
-.carousel-wrapper .carousel.block.wedges
+.carousel-wrapper
+  .carousel.block.wedges
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -595,7 +669,8 @@
   display: none;
 }
 
-.carousel-wrapper .carousel.block
+.carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -617,7 +692,9 @@
 }
 
 /* Carousel dark */
-.dark .carousel-wrapper .carousel.block
+.dark
+  .carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -625,7 +702,6 @@
   .carousel-text-content
   .carousel-item-pills {
   background-color: #151517;
-
 }
 
 .dark .carousel-wrapper .carousel.block {
@@ -633,7 +709,9 @@
   color: white;
 }
 
-.dark .carousel-wrapper .carousel.block
+.dark
+  .carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -644,14 +722,13 @@
   background-color: #1c1c1c;
 }
 
-
 /* With video variation */
-.carousel-wrapper .carousel.block.with-video
-  .carousel-main-wrapper {
-    max-height: 330px;
+.carousel-wrapper .carousel.block.with-video .carousel-main-wrapper {
+  max-height: 330px;
 }
 
-.carousel-wrapper .carousel.block.with-video
+.carousel-wrapper
+  .carousel.block.with-video
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -660,7 +737,8 @@
   padding-top: 55%;
 }
 
-.carousel-wrapper .carousel.block.with-video
+.carousel-wrapper
+  .carousel.block.with-video
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
@@ -669,31 +747,100 @@
   padding: 20px;
 }
 
-.dark .carousel-wrapper .carousel.block
+.dark
+  .carousel-wrapper
+  .carousel.block
   .carousel-main-wrapper
   .carousel-frame
   .carousel-item
   .carousel-item-wrapper
   .carousel-text-content
   .carousel-video-duration {
-    font-family: var(--font-gotham);
-    font-weight: 500;
-    line-height: 10px;
-    letter-spacing: .1em;
-    color: #adb4b7;
-    background: none;
-    position: static;
-    padding: 0;
-    margin: 0;
-    margin-top: 10px;
-    display: block;
-    font-size: 10px;
+  font-family: var(--font-gotham);
+  font-weight: 500;
+  line-height: 10px;
+  letter-spacing: 0.1em;
+  color: #adb4b7;
+  background: none;
+  position: static;
+  padding: 0;
+  margin: 0;
+  margin-top: 10px;
+  display: block;
+  font-size: 10px;
 }
 
-
 @media (max-width: 768px) {
   .carousel-wrapper .carousel.block.with-video .carousel-main-wrapper {
     max-height: 280px;
   }
 }
 
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper {
+  padding: 0;
+  height: 850px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls {
+  /* width: 100%; */
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  z-index: 1;
+}
+
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls .auto-carousel-button {
+  width: 70px;
+  height: 55px;
+  border: none;
+  border-radius: 0;
+  background: rgba(0 0 0 / 60%) url("/icons/arrow-icon.svg");
+  background-position: center center;
+  background-size: 20px 30px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  position: static;
+}
+
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls .auto-carousel-button.hidden {
+  width: 0;
+}
+
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls .auto-carousel-button.left-button {
+  transform: rotate(180deg);
+}
+
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .carousel-inner-wrapper {
+  height: 100%;
+}
+
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .carousel-inner-wrapper .carousel-frame {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  transition: all 0.25s ease 0s;
+  gap: 0;
+}
+
+.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper.grabbed .carousel-inner-wrapper .carousel-frame {
+  transition: none;
+}
+
+.carousel-wrapper
+  .carousel.block.auto-carousel
+  .carousel-main-wrapper
+  .carousel-inner-wrapper
+  .carousel-frame
+  .image-wrapper {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ededed;
+}
diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js
index 351380d4..08522697 100644
--- a/blocks/carousel/carousel.js
+++ b/blocks/carousel/carousel.js
@@ -1,24 +1,264 @@
 import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
 import {
-  getBlockId,
-  parseFragment,
-  removeEmptyElements,
-  render,
+  getBlockId, parseFragment, removeEmptyElements, render,
 } from '../../scripts/scripts.js';
 
-const placeholderHtml = (isLarge) => `<div class="carousel-main-wrapper" style="${isLarge ? 'aspect-ratio: 2/1; ' : 'height: 949px;'} width: 100%; visibility: hidden;"><div>`;
+const placeholderHtml = (isLarge) => `<div class="carousel-main-wrapper" style="${
+  isLarge ? 'aspect-ratio: 2/1; ' : 'height: 949px;'
+} width: 100%; visibility: hidden;"><div>`;
+
+const enableCarouselFunctionality = (template, { isWedges, isLarge, isAutoCarousel }) => {
+  // initialize variables & functions required for carousel features
+  const carouselWrapper = template.querySelector('.carousel-main-wrapper');
+  const carouselFrame = template.querySelector('.carousel-frame');
+  const carouselCardLinks = carouselFrame.children;
+  const rightButton = template.querySelector('.controls .right-button');
+  const leftButton = template.querySelector('.controls .left-button');
+  let pressed = false;
+  let x = 0;
+  let maxScroll = 1440;
+
+  let gapOffset = 27;
+  const updateGapOffset = () => {
+    if (isAutoCarousel) {
+      gapOffset = 0;
+      return;
+    }
+    if (!isWedges) {
+      gapOffset = isLarge ? 13 : 27;
+      return;
+    }
+    if (window.innerWidth <= 1280) {
+      gapOffset = 10.5;
+    } else {
+      gapOffset = 40;
+    }
+  };
+  updateGapOffset();
+
+  const refreshMaxScroll = () => {
+    if (isAutoCarousel) {
+      maxScroll = (carouselCardLinks.length - 1)
+        * (document.body.getBoundingClientRect().width || window.innerWidth);
+      return;
+    }
+    maxScroll = carouselCardLinks.length
+      * (carouselCardLinks[0].getBoundingClientRect().width + gapOffset) // prettier-ignore
+      - carouselFrame.getBoundingClientRect().width;
+  };
+
+  const roundX = (step = carouselCardLinks[0].getBoundingClientRect().width + gapOffset) => {
+    const rounded = Math.round(x / step) * step;
+    x = Math.min(0, Math.max(rounded, -maxScroll));
+  };
+
+  const addToX = (addValue) => {
+    const newValue = x + addValue;
+    // while dragging over the edge, value is reduced
+    if (newValue > 0) {
+      x = !pressed ? 0 : x + addValue / 8;
+    } else if (newValue < -maxScroll) {
+      x = !pressed ? -maxScroll : x + addValue / 8;
+    } else {
+      x = newValue;
+    }
+  };
+
+  const updateButtonVisibility = () => {
+    if (x > -40) {
+      leftButton.classList.add('hidden');
+    } else {
+      leftButton.classList.remove('hidden');
+    }
+    if (x < -maxScroll + 40) {
+      rightButton.classList.add('hidden');
+    } else {
+      rightButton.classList.remove('hidden');
+    }
+  };
+  updateButtonVisibility();
+
+  // drag logic starting with initialization for mobile
+  let previousTouch;
+
+  const mouseMoveHandler = (e) => {
+    if (!pressed) return;
+    if (!e?.touches?.[0]) {
+      e.preventDefault();
+    }
+    addToX(e.movementX);
+    carouselFrame.style.transform = `translateX(${x}px)`;
+    // prettier-ignore
+  };
+
+  const touchMoveHandler = (e) => {
+    const touch = e.touches[0];
+    if (previousTouch) {
+      e.movementX = touch.pageX - previousTouch.pageX;
+      mouseMoveHandler(e);
+    }
+    previousTouch = touch;
+  };
+
+  // mouse drag handlers
+  const mouseUpHandler = () => {
+    pressed = false;
+    carouselWrapper.classList.remove('grabbed');
+    roundX();
+    carouselFrame.style.transform = `translateX(${x}px)`;
+    updateButtonVisibility();
+    // cleanup
+    window.removeEventListener('mouseup', mouseUpHandler);
+    window.removeEventListener('touchend', mouseUpHandler);
+
+    window.removeEventListener('mousemove', mouseMoveHandler);
+    window.removeEventListener('touchmove', touchMoveHandler);
+  };
+
+  const mouseDownHandler = (e) => {
+    if (e?.touches?.[0]) {
+      [previousTouch] = e.touches;
+    }
+    carouselWrapper.classList.add('grabbed');
+    pressed = true;
+    refreshMaxScroll();
+
+    window.addEventListener('mouseup', mouseUpHandler);
+    window.addEventListener('touchend', mouseUpHandler);
+
+    window.addEventListener('mousemove', mouseMoveHandler);
+    window.addEventListener('touchmove', touchMoveHandler);
+  };
+  carouselWrapper.onmousedown = mouseDownHandler;
+  carouselWrapper.addEventListener('touchstart', mouseDownHandler);
+
+  // button logic
+  const rightOnClick = () => {
+    addToX(-carouselFrame.getBoundingClientRect().width);
+    roundX();
+    carouselFrame.style.transform = `translateX(${x}px)`;
+    updateButtonVisibility();
+  };
+
+  const leftOnClick = () => {
+    addToX(carouselFrame.getBoundingClientRect().width);
+    roundX();
+    carouselFrame.style.transform = `translateX(${x}px)`;
+    updateButtonVisibility();
+  };
+
+  rightButton.onclick = rightOnClick;
+  leftButton.onclick = leftOnClick;
+
+  // preventing drag from triggering a page switch & focus logic
+  const cardFocusHandler = (cardLink, index) => {
+    refreshMaxScroll();
+    const width = cardLink.getBoundingClientRect().width + gapOffset;
+    x = width * -index;
+    roundX(width);
+    updateButtonVisibility();
+    carouselFrame.style.transform = `translateX(${x}px)`;
+  };
+
+  [...carouselCardLinks].forEach((anchor, index) => {
+    if (!anchor.href) {
+      return;
+    }
+    const clickLocation = {};
+    const keyUpHandler = (e) => {
+      if (e.keyCode === 9) {
+        cardFocusHandler(anchor, index);
+      }
+      window.removeEventListener('keyup', keyUpHandler);
+    };
+    anchor.onkeyup = (e) => {
+      if (e.key === 'Enter') {
+        window.location.href = anchor.href.startsWith('#') ? window.location.href + anchor.href : anchor.href;
+      }
+    };
+    // waiting for keyup stops mouse clicks from triggering the focus logic
+    anchor.onfocus = () => {
+      window.addEventListener('keyup', keyUpHandler);
+    };
+    anchor.onmousedown = (e) => {
+      e.preventDefault();
+      clickLocation.x = e.clientX;
+      clickLocation.y = e.clientY;
+    };
+    // prevent opening links when dragging
+    // retains middle-click, shift-click, ctrl-click, etc. functionality
+    anchor.onclick = (e) => {
+      if (e.clientX !== clickLocation.x || e.clientY !== clickLocation.y) {
+        e.preventDefault();
+      }
+    };
+  });
 
-let carouselData;
+  // resize listener
+  let timeout = false;
+  const debouncedResizeHandler = () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      refreshMaxScroll();
+      addToX(0);
+      roundX();
+      carouselFrame.style.transform = `translateX(${x}px)`;
+      updateButtonVisibility();
+      if (isWedges) {
+        updateGapOffset();
+      }
+    }, 150);
+  };
+  window.addEventListener('resize', debouncedResizeHandler);
+};
 
 export default async function decorate(block) {
+  //
+  if (block.classList.contains('auto-carousel')) {
+    const images = [...block.querySelectorAll('picture')];
+    const HTML_TEMPLATE = `
+      <div class="carousel-main-wrapper">
+        <div class="controls">
+          <button class="auto-carousel-button left-button"></button>
+        
+          <button class="auto-carousel-button right-button"></button>
+        </div>
+
+        <div class="carousel-inner-wrapper">
+          <div class="carousel-frame" style="transform: translateX(0px);">
+            ${images
+    .map((image) => `
+                <div class="image-wrapper">
+                  ${image.outerHTML}
+                </div>
+              `)
+    .join('')}
+          </div>
+        </div>
+    </div>
+    `;
+    // Template rendering
+    const template = parseFragment(HTML_TEMPLATE);
+    enableCarouselFunctionality(template, { isAutoCarousel: true });
+
+    // Render template
+    render(template, block);
+
+    // Post-processing
+    removeEmptyElements(template, 'p');
+
+    block.innerHTML = '';
+    block.append(...template.children);
+    return;
+  }
   const id = getBlockId(block);
 
   const isWedges = block.classList.contains('wedges');
   const isLarge = block.classList.contains('large');
   const isCourses = block.classList.contains('courses');
-  const variants = Array.from(block.classList).filter(
-    (className) => className !== 'carousel' && className !== 'block',
-  ).join(' ');
+  const variants = Array.from(block.classList)
+    .filter((className) => className !== 'carousel' && className !== 'block')
+    .join(' ');
 
   let heading = block.querySelector('h3')?.textContent ?? '';
   if (isWedges) {
@@ -26,14 +266,12 @@ export default async function decorate(block) {
   }
 
   // Adding placeholder html
-  if (!carouselData) {
-    block.innerHTML = placeholderHtml(isLarge);
-  }
+  block.innerHTML = placeholderHtml(isLarge);
 
   // Render content upon fetch complete
   document.addEventListener(`query:${id}`, (event) => {
     // TODO Support multiple queries
-    carouselData = event.detail.data;
+    const carouselData = event.detail.data;
 
     const carouselHeadingType = isWedges ? 'h2' : 'h4';
 
@@ -42,10 +280,14 @@ export default async function decorate(block) {
     const isMobileWedges = isWedges && window.innerWidth < 779;
 
     const HTML_TEMPLATE = `
-    ${!heading ? '' : `<div class="carousel-title-wrapper">
+    ${
+  !heading
+    ? ''
+    : `<div class="carousel-title-wrapper">
         <${carouselHeadingType} class="carousel-title ${variants}">${heading}</${carouselHeadingType}>
       </div>
-    `}
+    `
+}
   <div class="carousel-main-wrapper ${isMobileWedges ? 'mobile-wedges' : ''}">
   <div class="controls">
     <button aria-label="Scroll Left" class="left-button"></button>
@@ -59,31 +301,55 @@ export default async function decorate(block) {
           <a class="carousel-item" href="${carouselItem.path}" >
             <div class="carousel-item-wrapper">
               <div class="carousel-image-wrapper">
-                ${createOptimizedPicture(carouselItem.image, carouselItem.imageAlt || carouselItem.title, false, isLarge ? [
-    { media: '(max-width: 768px)', width: '1300' },
-    { media: '(max-width: 1024px)', width: '1000' },
-    { media: '(max-width: 1280px)', width: '1200' },
-    { width: '1400' },
-  ] : [
-    { media: '(max-width: 768px)', width: '660' },
-    { media: '(max-width: 1024px)', width: '1000' },
-    { media: '(max-width: 1280px)', width: '560' },
-    { width: '650' },
-  ]).outerHTML}
+                ${
+  createOptimizedPicture(
+    carouselItem.image,
+    carouselItem.imageAlt || carouselItem.title,
+    false,
+    isLarge
+      ? [
+        { media: '(max-width: 768px)', width: '1300' },
+        { media: '(max-width: 1024px)', width: '1000' },
+        { media: '(max-width: 1280px)', width: '1200' },
+        { width: '1400' },
+      ]
+      : [
+        { media: '(max-width: 768px)', width: '660' },
+        { media: '(max-width: 1024px)', width: '1000' },
+        { media: '(max-width: 1280px)', width: '560' },
+        { width: '650' },
+      ],
+  ).outerHTML
+}
               </div>
               
               <div class="carousel-text-content">
-                ${!block.classList.contains('with-video') && carouselItem.rubric ? `<span class="sub-heading">${carouselItem.rubric}</span>` : ''}
+                ${
+  !block.classList.contains('with-video') && carouselItem.rubric
+    ? `<span class="sub-heading">${carouselItem.rubric}</span>`
+    : ''
+}
                 <h3 class="carousel-item-title">${carouselItem.title}</h3>
                 <!-- TODO remove placeholder, add dynamic data time duration -->
                 ${block.classList.contains('with-video') ? '<p class="carousel-video-duration">05:35</p>' : ''}
-                ${isCourses && carouselItem.location ? `<span class="carousel-item-location">${carouselItem.location}</span>` : ''}
+                ${
+  isCourses && carouselItem.location
+    ? `<span class="carousel-item-location">${carouselItem.location}</span>`
+    : ''
+}
   
-                ${Array.isArray(carouselItem.awards) && carouselItem.awards.length ? `<ul class="carousel-item-pills">${carouselItem.awards.map((award) => `<li class="pill-item">${award}</li>`).join('')}</ul>` : ''}
+                ${
+  Array.isArray(carouselItem.awards) && carouselItem.awards.length
+    ? `<ul class="carousel-item-pills">${carouselItem.awards
+      .map((award) => `<li class="pill-item">${award}</li>`)
+      .join('')}</ul>`
+    : ''
+}
               </div>
             </div>
           </a>`,
-    ).join('')}
+    )
+    .join('')}
       </div>
       </div>
     </div>
@@ -93,196 +359,7 @@ export default async function decorate(block) {
     const template = parseFragment(HTML_TEMPLATE);
 
     if (!isMobileWedges) {
-      // initialize variables & functions required for carousel features
-      const carouselWrapper = template.querySelector('.carousel-main-wrapper');
-      const carouselFrame = template.querySelector('.carousel-frame');
-      const carouselCardLinks = carouselFrame.children;
-      const rightButton = template.querySelector('.controls .right-button');
-      const leftButton = template.querySelector('.controls .left-button');
-      let pressed = false;
-      let x = 0;
-      let maxScroll = 1440;
-
-      let gapOffset = 27;
-      const updateGapOffset = () => {
-        if (!isWedges) {
-          gapOffset = isLarge ? 13 : 27;
-          return;
-        }
-        if (window.innerWidth <= 1280) {
-          gapOffset = 10.5;
-        } else {
-          gapOffset = 40;
-        }
-      };
-      updateGapOffset();
-
-      const refreshMaxScroll = () => {
-        maxScroll = carouselCardLinks.length
-          * (carouselCardLinks[0].getBoundingClientRect().width + gapOffset) // prettier-ignore
-          - carouselFrame.getBoundingClientRect().width;
-      };
-
-      const roundX = (step = carouselCardLinks[0].getBoundingClientRect().width + gapOffset) => {
-        const rounded = Math.round(x / step) * step;
-        x = Math.min(0, Math.max(rounded, -maxScroll));
-      };
-
-      const addToX = (addValue) => {
-        const newValue = x + addValue;
-        // while dragging over the edge, value is reduced
-        if (newValue > 0) {
-          x = !pressed ? 0 : x + addValue / 8;
-        } else if (newValue < -maxScroll) {
-          x = !pressed ? -maxScroll : x + addValue / 8;
-        } else {
-          x = newValue;
-        }
-      };
-
-      const updateButtonVisibility = () => {
-        if (x > -40) {
-          leftButton.classList.add('hidden');
-        } else {
-          leftButton.classList.remove('hidden');
-        }
-        if (x < -maxScroll + 40) {
-          rightButton.classList.add('hidden');
-        } else {
-          rightButton.classList.remove('hidden');
-        }
-      };
-      updateButtonVisibility();
-
-      // drag logic starting with initialization for mobile
-      let previousTouch;
-
-      const mouseMoveHandler = (e) => {
-        if (!pressed) return;
-        if (!e?.touches?.[0]) {
-          e.preventDefault();
-        }
-        addToX(e.movementX);
-        carouselFrame.style.transform = `translateX(${x}px)`;
-        // prettier-ignore
-      };
-
-      const touchMoveHandler = (e) => {
-        const touch = e.touches[0];
-        if (previousTouch) {
-          e.movementX = touch.pageX - previousTouch.pageX;
-          mouseMoveHandler(e);
-        }
-        previousTouch = touch;
-      };
-
-      // mouse drag handlers
-      const mouseUpHandler = () => {
-        pressed = false;
-        carouselWrapper.classList.remove('grabbed');
-        roundX();
-        carouselFrame.style.transform = `translateX(${x}px)`;
-        updateButtonVisibility();
-        // cleanup
-        window.removeEventListener('mouseup', mouseUpHandler);
-        window.removeEventListener('touchend', mouseUpHandler);
-
-        window.removeEventListener('mousemove', mouseMoveHandler);
-        window.removeEventListener('touchmove', touchMoveHandler);
-      };
-
-      const mouseDownHandler = (e) => {
-        if (e?.touches?.[0]) {
-          [previousTouch] = e.touches;
-        }
-        carouselWrapper.classList.add('grabbed');
-        pressed = true;
-        refreshMaxScroll();
-
-        window.addEventListener('mouseup', mouseUpHandler);
-        window.addEventListener('touchend', mouseUpHandler);
-
-        window.addEventListener('mousemove', mouseMoveHandler);
-        window.addEventListener('touchmove', touchMoveHandler);
-      };
-      carouselWrapper.onmousedown = mouseDownHandler;
-      carouselWrapper.addEventListener('touchstart', mouseDownHandler);
-
-      // button logic
-      const rightOnClick = () => {
-        addToX(-carouselFrame.getBoundingClientRect().width);
-        roundX();
-        carouselFrame.style.transform = `translateX(${x}px)`;
-        updateButtonVisibility();
-      };
-
-      const leftOnClick = () => {
-        addToX(carouselFrame.getBoundingClientRect().width);
-        roundX();
-        carouselFrame.style.transform = `translateX(${x}px)`;
-        updateButtonVisibility();
-      };
-
-      rightButton.onclick = rightOnClick;
-      leftButton.onclick = leftOnClick;
-
-      // preventing drag from triggering a page switch & focus logic
-      const cardFocusHandler = (cardLink, index) => {
-        refreshMaxScroll();
-        const width = cardLink.getBoundingClientRect().width + gapOffset;
-        x = width * -index;
-        roundX(width);
-        updateButtonVisibility();
-        carouselFrame.style.transform = `translateX(${x}px)`;
-      };
-
-      [...carouselCardLinks].forEach((anchor, index) => {
-        const clickLocation = {};
-        const keyUpHandler = (e) => {
-          if (e.keyCode === 9) {
-            cardFocusHandler(anchor, index);
-          }
-          window.removeEventListener('keyup', keyUpHandler);
-        };
-        anchor.onkeyup = (e) => {
-          if (e.key === 'Enter') {
-            window.location.href = anchor.href.startsWith('#') ? window.location.href + anchor.href : anchor.href;
-          }
-        };
-        // waiting for keyup stops mouse clicks from triggering the focus logic
-        anchor.onfocus = () => {
-          window.addEventListener('keyup', keyUpHandler);
-        };
-        anchor.onmousedown = (e) => {
-          e.preventDefault();
-          clickLocation.x = e.clientX;
-          clickLocation.y = e.clientY;
-        };
-        // prevent opening links when dragging
-        // retains middle-click, shift-click, ctrl-click, etc. functionality
-        anchor.onclick = (e) => {
-          if (e.clientX !== clickLocation.x || e.clientY !== clickLocation.y) {
-            e.preventDefault();
-          }
-        };
-      });
-
-      // resize listener
-      let timeout = false;
-      const debouncedResizeHandler = () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => {
-          refreshMaxScroll();
-          addToX(0);
-          roundX();
-          carouselFrame.style.transform = `translateX(${x}px)`;
-          updateButtonVisibility();
-          if (isWedges) {
-            updateGapOffset();
-          }
-        }, 150);
-      };
-      window.addEventListener('resize', debouncedResizeHandler);
+      enableCarouselFunctionality(template, { isWedges, isLarge });
     }
 
     // Render template
diff --git a/blocks/courses/courses.css b/blocks/courses/courses.css
index 9ede77f7..c95a3379 100644
--- a/blocks/courses/courses.css
+++ b/blocks/courses/courses.css
@@ -5,13 +5,20 @@
     justify-content: space-between;
     font-family: var(--font-gotham);
     padding: 20px;
-    margin: 20px;
+    margin: 20px auto;
+    max-width: 800px;
 }
 
 .courses-wrapper .courses.block .courses-info-wrapper {
     display: flex;
 }
 
+.courses-wrapper .courses.block .courses-info {
+    line-height: 26.4px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
 .courses-wrapper .courses.block .courses-info-wrapper + p {
     margin-bottom: 0;
 }
@@ -53,7 +60,7 @@
 
 .article-body .courses-text-wrapper .courses-tags > li > a {
     text-decoration: none; 
-    color: #fff;
+    color: #fff !important;
     background: #105259;
     white-space: nowrap;
     font-family: var(--font-gotham);
diff --git a/blocks/default-article/default-article.css b/blocks/default-article/default-article.css
index ee8cfd05..8ad279c0 100644
--- a/blocks/default-article/default-article.css
+++ b/blocks/default-article/default-article.css
@@ -1,3 +1,8 @@
+.default-article-wrapper .default-article.block .center-seperator {
+    display: flex;
+    justify-content: center;
+}
+
 .default-article-wrapper .default-article.block .container {
     max-width: var(--layout-width);
     margin: 0 auto;
@@ -149,10 +154,6 @@
     justify-content: center;
 }
 
-.default-article-wrapper .default-article.block .lead .portrait img {
-    max-width: 400px;
-}
-
 .default-article-wrapper .default-article.block .credit {
     margin: 0 auto;
     padding-top: 15px;
@@ -230,3 +231,15 @@
 .default-article-wrapper .default-article.block .article-body .portrait img {
     max-width: 600px;
 }
+
+.default-article-wrapper .default-article.block .article-body h2 {
+    font-family: var(--font-tungsten);
+    font-size: 37px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 38px;
+    letter-spacing: .05em;
+    border-bottom: 2px solid #ed3e49;
+    margin: 60px auto;
+    width: max-content;
+}
diff --git a/blocks/default-article/default-article.js b/blocks/default-article/default-article.js
index 36b5f622..c8716f97 100644
--- a/blocks/default-article/default-article.js
+++ b/blocks/default-article/default-article.js
@@ -44,9 +44,9 @@ export default async function decorate(block) {
             <div class="attribution">
               ${author ? `<span>By&nbsp;</span><a href="${normalizeAuthorURL(author)}">${author}</a>` : ''}
             </div>
-            <div class="publication">
+            ${publicationDate ? `<div class="publication">
                 <span>${publicationDate}</span>
-            </div>
+            </div>` : ''}
             <div class="sharing">
                 <slot name="share"></slot>
             </div>
@@ -92,6 +92,12 @@ export default async function decorate(block) {
   share.setAttribute('slot', 'share');
   block.append(share);
 
+  block.querySelectorAll('p').forEach((p) => {
+    if (p.textContent.includes('• • •')) {
+      p.classList.add('center-seperator');
+    }
+  });
+
   replaceLinksWithEmbed(block);
 
   // Render template
diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css
index 0c88ea50..2aaf7d4a 100644
--- a/blocks/embed/embed.css
+++ b/blocks/embed/embed.css
@@ -79,6 +79,10 @@ main .embed.block:has(div > iframe, iframe) {
     max-width: 100%;
 }
 
+main article.article-content .embed.block:has(div > iframe, iframe) {
+    max-width: 800px;
+}
+
 main .embed.block[data-embed-link^="https://view.ceros.com/golf-digest/"] {
     max-width: var(--layout-width);
 }
diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js
index 4377dc75..408d64a6 100644
--- a/blocks/embed/embed.js
+++ b/blocks/embed/embed.js
@@ -111,7 +111,6 @@ const embedTwitter = (url) => {
 };
 
 const loadEmbed = (block, link, autoplay) => {
-  console.log('\x1b[31m ~ link:', link);
   if (block.classList.contains('embed-is-loaded')) {
     return;
   }
diff --git a/blocks/full-bleed/full-bleed.css b/blocks/full-bleed/full-bleed.css
index 346471a7..560a3b12 100644
--- a/blocks/full-bleed/full-bleed.css
+++ b/blocks/full-bleed/full-bleed.css
@@ -122,7 +122,7 @@
 
 
 .full-bleed-wrapper .full-bleed.block .article-body div > p {
-  margin: 0 auto 30px;
+  margin: 0 auto 60px;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -138,7 +138,7 @@
 }
 
 @media (min-width: 769px) {
-  .full-bleed-wrapper .full-bleed.block .article-body div > p {
+  .full-bleed-wrapper .full-bleed.block .article-body p {
     margin-bottom: 60px;
   }
 }
@@ -329,6 +329,10 @@
 
 .full-bleed-wrapper .full-bleed.block .article-body a {
   color: #000;
+  font-weight: 500;
+}
+
+.full-bleed-wrapper .full-bleed.block .article-body strong a {
   font-weight: 600;
 }
 
diff --git a/blocks/gallery-listicle/gallery-listicle.css b/blocks/gallery-listicle/gallery-listicle.css
index 0b4399f9..48f55782 100644
--- a/blocks/gallery-listicle/gallery-listicle.css
+++ b/blocks/gallery-listicle/gallery-listicle.css
@@ -89,6 +89,10 @@
     line-height: 30px;
 }
 
+.gallery-listicle-wrapper .gallery-listicle.block .headline p:first-of-type {
+    font-weight: 400;
+}
+
 .gallery-listicle-wrapper .gallery-listicle.block .byline {
     display: flex;
     justify-content: flex-start;
@@ -131,14 +135,22 @@
     text-decoration: none;
 }
 
-.gallery-listicle-wrapper .gallery-listicle.block .article-body strong > a {
+.gallery-listicle-wrapper .gallery-listicle.block .article-body strong:not(:has(> *)) {
     text-decoration: underline;
 }
 
+.gallery-listicle-wrapper .gallery-listicle.block .article-body strong > a {
+    text-decoration: none;
+}
+
 .gallery-listicle-wrapper .gallery-listicle.block .article-body > div a:hover {
     color: var(--link-hover-color);
 }
 
+.gallery-listicle-wrapper .gallery-listicle.block .article-body p > strong:only-child > a:only-child {
+    text-decoration: underline;
+}
+
 .gallery-listicle-wrapper .gallery-listicle.block .publication {
     display: flex;
     align-items: baseline;
diff --git a/blocks/long-form/long-form.css b/blocks/long-form/long-form.css
index 804b92de..fb108886 100644
--- a/blocks/long-form/long-form.css
+++ b/blocks/long-form/long-form.css
@@ -1,5 +1,7 @@
 .long-form-wrapper .long-form.block .container {
     margin: 0 auto;
+
+    --article-width: 800px;
 }
 
 .long-form-wrapper .long-form.block .container-article {
@@ -25,7 +27,7 @@
 
 .long-form-wrapper .long-form.block .article-body a {
     color: #000;
-    text-decoration: none;
+    font-weight: 500;
 }
 
 .long-form-wrapper .long-form.block .article-body strong > a {
@@ -115,18 +117,25 @@
     margin: 20px 0;
 }
 
-.long-form-wrapper .long-form.block .article-body div > p {
+.long-form-wrapper .long-form.block .article-body > div > div > div > * {
+    display: block;
     line-height: 30px;
-    margin-bottom: 20px;
+    margin: 0 auto 20px;
     padding: 0 20px;
+    max-width: var(--article-width);
+}
+
+.long-form-wrapper .long-form.block .article-body > div > div > div > div:has(iframe:not([src*="players.brightcove.net"])) {
+    max-width: none;
+    padding: 0;
 }
 
 .long-form-wrapper .long-form.block .article-body h2 {
     font-family: var(--font-tungsten);
     font-size: 37px;
     font-style: normal;
-    font-weight: 700;
-    line-height: 38px;
+    font-weight: 600;
+    line-height: 38px !important;
     letter-spacing: .05em;
     text-decoration: underline;
     text-decoration-color: var(--link-hover-color);
@@ -142,8 +151,8 @@
 }
 
 @media (min-width: 1025px) {
-    .long-form-wrapper .long-form.block .article-body div > p {
-        padding: 0 35px;
+    .long-form-wrapper .long-form.block .article-body > div > div > div > * {
+        padding: 0 15px 0 35px;
         margin-bottom: 60px;
     }
 
@@ -153,6 +162,12 @@
     }
 }
 
+.long-form-wrapper .long-form.block .article-body p:has( > picture img ) {
+    width: 100vw;
+    max-width: none !important;
+    padding: 0 !important;
+}
+
 .long-form-wrapper .long-form.block .headline .description p {
     margin: 0;
 }
@@ -307,7 +322,6 @@
 }
 
 .long-form-wrapper .long-form.block .article-body {
-    max-width: 800px;
     margin: auto;
     padding-bottom: 60px;
 }
@@ -352,11 +366,11 @@
     }
 }
 
-.long-form-wrapper .long-form.block .article-body .fullscreen {
+.long-form-wrapper .long-form.block .article-body p > picture {
     margin-bottom: 0;
 }
 
-.long-form-wrapper .long-form.block .article-body .fullscreen img {
+.long-form-wrapper .long-form.block .article-body p > picture img {
     position: relative;
     background-color: #ededed;
     width: 100vw;
diff --git a/blocks/long-form/long-form.js b/blocks/long-form/long-form.js
index 88046d92..38631342 100644
--- a/blocks/long-form/long-form.js
+++ b/blocks/long-form/long-form.js
@@ -1,7 +1,9 @@
 import {
   addPhotoCredit,
   ARTICLE_TEMPLATES,
-  assignSlot, getAuthors, normalizeAuthorURL,
+  assignSlot,
+  getAuthors,
+  normalizeAuthorURL,
   parseFragment,
   parseSectionMetadata,
   removeEmptyElements,
@@ -39,7 +41,9 @@ export default async function decorate(block) {
             <div class="byline">
               <div class="attribution">
                   <span>By&nbsp;</span>
-                  ${authors.map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`).join('&nbsp;and&nbsp;')}
+                  ${authors
+    .map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`)
+    .join('&nbsp;and&nbsp;')}
               </div>
               <div class="publication">
                   ${publicationDate ? '<div class="separator"></div>' : ''}  
@@ -53,7 +57,9 @@ export default async function decorate(block) {
           <div class="byline">
             <div class="attribution">
                 ${authors.length ? '<span>By&nbsp;</span>' : ''}
-                ${authors.map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`).join('&nbsp;and&nbsp;')}
+                ${authors
+    .map((author) => `<a href="${normalizeAuthorURL(author)}">${author}</a>`)
+    .join('&nbsp;and&nbsp;')}
             </div>
             <div class="publication">
                 <span>${publicationDate}</span>
@@ -116,21 +122,14 @@ export default async function decorate(block) {
   const pictures = template.querySelectorAll('.article-body p > picture');
   addPhotoCredit(pictures);
 
-  // Set fullscreen images
-  pictures.forEach((picture) => {
-    const img = picture.querySelector('img');
-    picture.parentElement.classList.add('fullscreen');
-    img.onload = () => {
-      img.style.left = `-${img.offsetLeft}px`;
-    };
-  });
-
   // Update block with rendered template
   block.innerHTML = '';
   block.append(template);
 
   // Inner block loading
-  block.querySelectorAll('.social-share, .embed, .more-cards, .courses').forEach((innerBlock) => decorateBlock(innerBlock));
+  block
+    .querySelectorAll('.social-share, .embed, .more-cards, .courses')
+    .forEach((innerBlock) => decorateBlock(innerBlock));
   loadBlocks(document.querySelector('main'));
 
   // Toggle dark theme on scroll
@@ -143,18 +142,39 @@ export default async function decorate(block) {
     }).observe(block.querySelector('.lead .image'));
   });
 
-  // Get images that were styled as fullscreen and adjust position
-  window.onresize = () => {
-    block.querySelectorAll('.fullscreen img').forEach((img) => {
-      // Hide visibility before resetting the position
-      img.style.visibility = 'hidden';
-      img.style.left = 0;
-
-      // Wait frame before reading position
-      requestAnimationFrame(() => {
-        img.style.left = `-${img.offsetLeft}px`;
-        img.style.visibility = 'visible';
-      });
-    });
-  };
+  // creating auto carousels
+  const autoCarouselGroups = [];
+
+  const potentialArticleImageGroups = block.querySelectorAll(
+    '.article-body *:not(:has(picture)) + p:has(> picture img)',
+  );
+  potentialArticleImageGroups.forEach((imageParagraph) => {
+    // this element is followed by at least 2 other images
+    if (
+      imageParagraph.nextElementSibling.querySelector('picture > img')
+      && imageParagraph.nextElementSibling.nextElementSibling.querySelector('picture > img')
+    ) {
+      const imageGroup = [];
+
+      let nextElementToProcess = imageParagraph;
+      while (nextElementToProcess) {
+        const hasImage = nextElementToProcess.querySelector('picture > img');
+        if (hasImage) {
+          imageGroup.push(nextElementToProcess);
+          nextElementToProcess = nextElementToProcess.nextElementSibling;
+        } else {
+          nextElementToProcess = false;
+        }
+      }
+      autoCarouselGroups.push(imageGroup);
+    }
+  });
+
+  autoCarouselGroups.forEach((imageArray) => {
+    const prevNode = imageArray[0].previousSibling;
+    const autoCarouselBlock = buildBlock('carousel', { elems: imageArray });
+    autoCarouselBlock.classList.add('auto-carousel');
+    prevNode.parentElement.insertBefore(autoCarouselBlock, prevNode.nextElementSibling);
+    decorateBlock(autoCarouselBlock);
+  });
 }
diff --git a/blocks/more-cards/more-cards.css b/blocks/more-cards/more-cards.css
index 4ed43821..43bfb3f8 100644
--- a/blocks/more-cards/more-cards.css
+++ b/blocks/more-cards/more-cards.css
@@ -1,10 +1,14 @@
 .more-cards {
-    padding: 15px 10px;
+    padding: 15px 22px !important;
     margin: 30px 0;
     display: flex;
     justify-content: center;
 }
 
+.more-cards a {
+    text-decoration: none;
+}
+
 .more-cards.multiple {
     background-color: #f6f6f6;
 }
@@ -22,7 +26,9 @@
 
 @media (min-width: 1025px) {
     .more-cards {
-        margin: 60px 0;
+        margin: 60px auto;
+        width: max-content;
+        max-width: 100%;
     }
 }
 
diff --git a/blocks/product-listing/product-listing.css b/blocks/product-listing/product-listing.css
index 4fd117dc..27bcec17 100644
--- a/blocks/product-listing/product-listing.css
+++ b/blocks/product-listing/product-listing.css
@@ -102,7 +102,7 @@
 }
 
 .product-listing-wrapper .product-listing.block .article-content .details .separator,
-.product-listing-wrapper .product-listing.block .article-content .details .separator + span {
+.product-listing-wrapper .product-listing.block .article-content .details .advertiser {
     color: #adb4b7;
 }
 
diff --git a/blocks/product-listing/product-listing.js b/blocks/product-listing/product-listing.js
index 97552ce0..f208a2a3 100644
--- a/blocks/product-listing/product-listing.js
+++ b/blocks/product-listing/product-listing.js
@@ -42,7 +42,7 @@ export default async function decorate(block) {
             </div>
             <div class="details">
                 <span>${sectionMetadata.price}</span>
-                ${sectionMetadata.price && sectionMetadata.advertiser ? '<span class="separator">|</span>' : ''}
+                ${sectionMetadata.advertiser ? '<span class="separator">|</span>' : ''}
                 <span class="advertiser">${sectionMetadata.advertiser}</span>
             </div>
             <div class="link">
diff --git a/blocks/social-share/social-share.css b/blocks/social-share/social-share.css
index 8e2429ee..b93bff03 100644
--- a/blocks/social-share/social-share.css
+++ b/blocks/social-share/social-share.css
@@ -52,6 +52,13 @@
     display: none;
 }
 
+.long-form-wrapper .long-form.block .social-share {
+    width: 100%;
+    max-width: 800px;
+    padding: 0 20px;
+    margin: 0 auto 28px;
+}
+
 @media (max-width: 770px) {
     main .sharing.hide-on-mobile{
         display: none;
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 14bbc72b..bf376ee9 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -31,8 +31,12 @@ const LCP_BLOCKS = [...Object.values(ARTICLE_TEMPLATES), 'hero']; // add your LC
 const range = document.createRange();
 
 export function replaceLinksWithEmbed(block) {
-  const embeds = ['youtube', 'brightcove', 'instagram'];
-  block.querySelectorAll(embeds.map((embed) => `a[href*="${embed}"]`).join(',')).forEach((embedLink) => {
+  const embeds = ['youtube', 'brightcove', 'instagram', 'ceros'];
+  block.querySelectorAll(embeds.map((embed) => `a:only-child[href*="${embed}"]`).join(',')).forEach((embedLink) => {
+    // do not transform links that are inline
+    if (embedLink.innerText !== embedLink.parentElement.innerText) {
+      return;
+    }
     if (embedLink.textContent.startsWith('View') && embedLink.href.includes('instagram')) {
       embedLink.remove();
     } else {
diff --git a/styles/styles.css b/styles/styles.css
index 7ffc5030..8b18893b 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -338,3 +338,8 @@ div.article-blocker-wrapper div.article-blocker-content a.cta:hover {
 .newsletter-subscribe main {
   background-color: rgb(246 246 246);
 }
+
+
+
+
+