diff --git a/src/components/elements/screen-centered.tsx b/src/components/elements/screen-centered.tsx
new file mode 100644
index 00000000..cfb71bb4
--- /dev/null
+++ b/src/components/elements/screen-centered.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import {HTMLAttributes, useCallback, useEffect, useRef, useState} from "react"
+import {useEventListener} from "usehooks-ts"
+
+const ScreenCentered = ({children}: HTMLAttributes<HTMLDivElement>) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [translate, setTranslate] = useState(0)
+  const calculateTranslation = useCallback(() => setTranslate(ref.current?.getBoundingClientRect().x || 0), [])
+  useEventListener("resize", calculateTranslation)
+  useEffect(() => calculateTranslation(), [calculateTranslation])
+
+  return (
+    <div ref={ref} className="relative left-1/2 w-screen -translate-x-1/2">
+      <div style={{transform: `translate(-${translate}px)`}}>{children}</div>
+    </div>
+  )
+}
+export default ScreenCentered
diff --git a/src/components/nodes/pages/stanford-page/stanford-page-page.tsx b/src/components/nodes/pages/stanford-page/stanford-page-page.tsx
index ed3ff701..5090e49f 100644
--- a/src/components/nodes/pages/stanford-page/stanford-page-page.tsx
+++ b/src/components/nodes/pages/stanford-page/stanford-page-page.tsx
@@ -2,11 +2,7 @@ import Rows from "@components/paragraphs/rows/rows"
 import InteriorPage from "@components/layouts/interior-page"
 import {H1} from "@components/elements/headers"
 import {HtmlHTMLAttributes} from "react"
-import {
-  NodeStanfordPage,
-  NodeStanfordPageSuPageBannerUnion,
-  NodeStanfordPageSuPageComponentsUnion,
-} from "@lib/gql/__generated__/drupal.d"
+import {NodeStanfordPage, NodeStanfordPageSuPageBannerUnion} from "@lib/gql/__generated__/drupal.d"
 import PageTitleBannerParagraph from "@components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph"
 import SumArcBannerParagraph from "@components/paragraphs/sum-arc-banner/sum-arc-banner-paragraph"
 import SumTopBannerParagraph from "@components/paragraphs/sum-top-banner/sum-top-banner-paragraph"
@@ -17,25 +13,13 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const StanfordPagePage = ({node, ...props}: Props) => {
-  // If the page contains any of the following components, force the page to be full width. This prevents the need to
-  // address the large components on "interior" pages that contain a left sidebar. It's more effort than it's worth.
-  const fullWidthComponents: NodeStanfordPageSuPageComponentsUnion["__typename"][] = [
-    "ParagraphSumTestimonial",
-    "ParagraphSumCarousel",
-    "ParagraphSumCourseFilter",
-    "ParagraphSumPillBanner",
-    "ParagraphStanfordBanner",
-  ]
   const pageTitleBanners: NodeStanfordPageSuPageBannerUnion["__typename"][] = [
     "ParagraphStanfordPageTitleBanner",
     "ParagraphSumArcBanner",
     "ParagraphSumTopBanner",
   ]
 
-  const fullWidth =
-    node.layoutSelection?.id === "stanford_basic_page_full" ||
-    !!node.suPageComponents?.find(component => fullWidthComponents.includes(component.__typename))
-
+  const fullWidth = node.layoutSelection?.id === "stanford_basic_page_full"
   const lastComponent = node.suPageComponents?.[node.suPageComponents?.length - 1]?.__typename
 
   const hasBannerOrCalculator = [
diff --git a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
index d150467b..524d13fc 100644
--- a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
+++ b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
@@ -9,6 +9,7 @@ import ActionLink from "@components/elements/action-link"
 import Link from "next/link"
 import {ArrowRightIcon} from "@heroicons/react/24/outline"
 import Image from "next/image"
+import ScreenCentered from "@components/elements/screen-centered"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordBanner
@@ -30,80 +31,88 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
   const BannerWrapper: ElementType = isSection ? "section" : "div"
 
   return (
-    <BannerWrapper
-      {...props}
-      aria-labelledby={paragraph.suBannerHeader ? paragraph.id : undefined}
-      className="relative left-1/2 !mt-0 flex w-screen -translate-x-1/2 flex-col @container md:min-h-[400px] lg:block"
-    >
-      {hasCard && (
-        <div
-          className={twMerge(
-            "rs-px-5 rs-pb-8 rs-pt-10 relative mb-0 flex h-full min-h-[400px] w-full flex-col border-b-4 border-white bg-poppy-light lg:z-10 lg:w-[calc(50%_-_5rem)] lg:border-4 lg:border-y-0",
-            clsx({
-              "lg:ml-auto lg:mr-20": overlayPosition === "right",
-              "lg:ml-20 lg:mr-auto": overlayPosition !== "right",
-              "bg-olive-light": bgColor === "olive",
-              "bg-spirited-light": bgColor === "spirited",
-              "bg-spirited-dark text-white": bgColor === "spirited_dark",
-            })
-          )}
-        >
-          {paragraph.suBannerHeader && (
-            <div id={paragraph.id} className={behaviors.hero_pattern?.hide_heading ? "sr-only" : undefined}>
-              {headerTag === "h2" && <H2 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H2>}
-              {headerTag === "h3" && <H3 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H3>}
-              {headerTag === "h4" && <H4 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H4>}
-              {headerTag === "div" && (
-                <div className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</div>
-              )}
-            </div>
-          )}
+    <ScreenCentered>
+      <BannerWrapper
+        {...props}
+        aria-labelledby={paragraph.suBannerHeader ? paragraph.id : undefined}
+        className="!mt-0 flex flex-col @container md:min-h-[400px] lg:block"
+      >
+        {hasCard && (
+          <div
+            className={twMerge(
+              "rs-px-5 rs-pb-8 rs-pt-10 relative mb-0 flex h-full min-h-[400px] w-full flex-col border-b-4 border-white bg-poppy-light lg:z-10 lg:w-[calc(50%_-_5rem)] lg:border-4 lg:border-y-0",
+              clsx({
+                "lg:ml-auto lg:mr-20": overlayPosition === "right",
+                "lg:ml-20 lg:mr-auto": overlayPosition !== "right",
+                "bg-olive-light": bgColor === "olive",
+                "bg-spirited-light": bgColor === "spirited",
+                "bg-spirited-dark text-white": bgColor === "spirited_dark",
+              })
+            )}
+          >
+            {paragraph.suBannerHeader && (
+              <div id={paragraph.id} className={behaviors.hero_pattern?.hide_heading ? "sr-only" : undefined}>
+                {headerTag === "h2" && (
+                  <H2 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H2>
+                )}
+                {headerTag === "h3" && (
+                  <H3 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H3>
+                )}
+                {headerTag === "h4" && (
+                  <H4 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H4>
+                )}
+                {headerTag === "div" && (
+                  <div className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</div>
+                )}
+              </div>
+            )}
 
-          {paragraph.suBannerSupHeader && (
-            <div className="rs-mb-1 order-first text-09em font-normal uppercase">{paragraph.suBannerSupHeader}</div>
-          )}
+            {paragraph.suBannerSupHeader && (
+              <div className="rs-mb-1 order-first text-09em font-normal uppercase">{paragraph.suBannerSupHeader}</div>
+            )}
 
-          <Wysiwyg html={paragraph.suBannerBody?.processed} className="big-paragraph" />
+            <Wysiwyg html={paragraph.suBannerBody?.processed} className="big-paragraph" />
 
-          {paragraph.suBannerButton?.url && !semiCircleButton && (
-            <div className="rs-pt-2">
-              <ActionLink
-                className="btn rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
-                href={paragraph.suBannerButton.url}
-              >
-                {paragraph.suBannerButton.title}
-              </ActionLink>
-            </div>
-          )}
-        </div>
-      )}
-      <div className="lg:aspect-auto relative aspect-[16/9] w-full bg-cool-grey lg:absolute lg:top-0 lg:h-full">
-        {paragraph.suBannerImage?.mediaImage && (
-          <Image
-            className="object-cover"
-            src={paragraph.suBannerImage?.mediaImage.url}
-            alt={paragraph.suBannerImage?.mediaImage.alt || ""}
-            loading={eagerLoadImage ? "eager" : "lazy"}
-            fill
-            sizes="100vw"
-          />
+            {paragraph.suBannerButton?.url && !semiCircleButton && (
+              <div className="rs-pt-2">
+                <ActionLink
+                  className="btn rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
+                  href={paragraph.suBannerButton.url}
+                >
+                  {paragraph.suBannerButton.title}
+                </ActionLink>
+              </div>
+            )}
+          </div>
         )}
-        <div className="rs-pr-1 absolute top-0 z-50 flex w-screen justify-end lg:bottom-0 lg:left-0 lg:top-auto lg:justify-center lg:p-0">
-          {paragraph.suBannerButton?.url && semiCircleButton && (
-            <Link
-              className="group flex aspect-[2/1] h-fit w-[210px] items-start justify-center rounded-bl-full rounded-br-full border-4 border-b-4 border-t-0 border-white bg-spirited-dark text-white hocus:text-white md:w-[250px] lg:items-end lg:rounded-b-none lg:rounded-tl-full lg:rounded-tr-full lg:border-b-0 lg:border-t-4 2xl:w-[300px]"
-              href={paragraph.suBannerButton.url}
-            >
-              <span className="sr-only">{paragraph.suBannerButton.title}</span>
-              <ArrowRightIcon
-                width={60}
-                className="mt-10 inline-block w-[45px] border-b-2 border-transparent group-hocus:border-white lg:mb-10 lg:mt-0 2xl:mb-16 2xl:w-[60px]"
-              />
-            </Link>
+        <div className="lg:aspect-auto relative aspect-[16/9] w-full bg-cool-grey lg:absolute lg:top-0 lg:h-full">
+          {paragraph.suBannerImage?.mediaImage && (
+            <Image
+              className="object-cover"
+              src={paragraph.suBannerImage?.mediaImage.url}
+              alt={paragraph.suBannerImage?.mediaImage.alt || ""}
+              loading={eagerLoadImage ? "eager" : "lazy"}
+              fill
+              sizes="100vw"
+            />
           )}
+          <div className="rs-pr-1 absolute top-0 z-50 flex w-screen justify-end lg:bottom-0 lg:left-0 lg:top-auto lg:justify-center lg:p-0">
+            {paragraph.suBannerButton?.url && semiCircleButton && (
+              <Link
+                className="group flex aspect-[2/1] h-fit w-[210px] items-start justify-center rounded-bl-full rounded-br-full border-4 border-b-4 border-t-0 border-white bg-spirited-dark text-white hocus:text-white md:w-[250px] lg:items-end lg:rounded-b-none lg:rounded-tl-full lg:rounded-tr-full lg:border-b-0 lg:border-t-4 2xl:w-[300px]"
+                href={paragraph.suBannerButton.url}
+              >
+                <span className="sr-only">{paragraph.suBannerButton.title}</span>
+                <ArrowRightIcon
+                  width={60}
+                  className="mt-10 inline-block w-[45px] border-b-2 border-transparent group-hocus:border-white lg:mb-10 lg:mt-0 2xl:mb-16 2xl:w-[60px]"
+                />
+              </Link>
+            )}
+          </div>
         </div>
-      </div>
-    </BannerWrapper>
+      </BannerWrapper>
+    </ScreenCentered>
   )
 }
 export default BannerParagraph
diff --git a/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx b/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx
index b16ea9a6..1d196273 100644
--- a/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx
+++ b/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx
@@ -14,6 +14,7 @@ import ArcBanner from "@components/patterns/arc-banner"
 import {getParagraphBehaviors} from "../get-paragraph-behaviors"
 import clsx from "clsx"
 import {twMerge} from "tailwind-merge"
+import ScreenCentered from "@components/elements/screen-centered"
 
 type Props = HTMLAttributes<HTMLElement> & {
   paragraph: ParagraphSumCarousel
@@ -26,50 +27,52 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
   const Element = paragraph.sumCarouselHeader ? "article" : "div"
 
   return (
-    <Element {...props} aria-labelledby={paragraph.sumCarouselHeader ? paragraph.id : undefined}>
-      {isArcBanner && (
-        <ArcBanner isBorder>
+    <ScreenCentered>
+      <Element {...props} aria-labelledby={paragraph.sumCarouselHeader ? paragraph.id : undefined}>
+        {isArcBanner && (
+          <ArcBanner isBorder>
+            <CarouselTop
+              header={paragraph.sumCarouselHeader}
+              superHeader={paragraph.sumCarouselSuperheader}
+              headingSize={headingSize}
+              description={paragraph.sumCarouselDescription?.processed}
+              link={paragraph.sumCarouselLink}
+              className="md:rs-mt-7"
+              headerId={paragraph.id}
+            />
+          </ArcBanner>
+        )}
+
+        {!isArcBanner && (
           <CarouselTop
             header={paragraph.sumCarouselHeader}
             superHeader={paragraph.sumCarouselSuperheader}
             headingSize={headingSize}
             description={paragraph.sumCarouselDescription?.processed}
             link={paragraph.sumCarouselLink}
-            className="md:rs-mt-7"
             headerId={paragraph.id}
           />
-        </ArcBanner>
-      )}
-
-      {!isArcBanner && (
-        <CarouselTop
-          header={paragraph.sumCarouselHeader}
-          superHeader={paragraph.sumCarouselSuperheader}
-          headingSize={headingSize}
-          description={paragraph.sumCarouselDescription?.processed}
-          link={paragraph.sumCarouselLink}
-          headerId={paragraph.id}
-        />
-      )}
+        )}
 
-      {paragraph.sumCarouselSlides && (
-        <div className="relative left-1/2 mb-32 mt-0 w-screen -translate-x-1/2">
-          <Slideshow className="mx-auto w-[calc(100%-50px)] xl:w-[calc(100%-150px)]">
-            {paragraph.sumCarouselSlides.map((slide, slideIndex) => {
-              return (
-                <CarouselSlide
-                  key={slide.id}
-                  slide={slide}
-                  slideNumber={slideIndex + 1}
-                  totalSlides={paragraph.sumCarouselSlides?.length || 0}
-                  slideHeader={paragraph.sumCarouselHeader ? "h3" : "h2"}
-                />
-              )
-            })}
-          </Slideshow>
-        </div>
-      )}
-    </Element>
+        {paragraph.sumCarouselSlides && (
+          <div className="mb-32 mt-0">
+            <Slideshow className="mx-auto w-[calc(100%-50px)] xl:w-[calc(100%-150px)]">
+              {paragraph.sumCarouselSlides.map((slide, slideIndex) => {
+                return (
+                  <CarouselSlide
+                    key={slide.id}
+                    slide={slide}
+                    slideNumber={slideIndex + 1}
+                    totalSlides={paragraph.sumCarouselSlides?.length || 0}
+                    slideHeader={paragraph.sumCarouselHeader ? "h3" : "h2"}
+                  />
+                )
+              })}
+            </Slideshow>
+          </div>
+        )}
+      </Element>
+    </ScreenCentered>
   )
 }
 
diff --git a/src/components/paragraphs/sum-pill-banner/sum-pill-banner-paragraph.tsx b/src/components/paragraphs/sum-pill-banner/sum-pill-banner-paragraph.tsx
index 58db9c5e..2b6c45a6 100644
--- a/src/components/paragraphs/sum-pill-banner/sum-pill-banner-paragraph.tsx
+++ b/src/components/paragraphs/sum-pill-banner/sum-pill-banner-paragraph.tsx
@@ -8,6 +8,7 @@ import {twMerge} from "tailwind-merge"
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors"
 import {clsx} from "clsx"
 import ActionLink from "@components/elements/action-link"
+import ScreenCentered from "@components/elements/screen-centered"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphSumPillBanner
@@ -18,83 +19,86 @@ const SumPillBannerParagraph = ({paragraph, ...props}: Props) => {
   const Element = paragraph.sumPillBannerHeadline ? "article" : "div"
 
   return (
-    <Element
-      {...props}
-      className={twMerge("relative left-1/2 !mt-0 w-screen -translate-x-1/2", props.className)}
-      aria-labelledby={paragraph.sumPillBannerHeadline ? paragraph.id : undefined}
-    >
-      {paragraph.sumPillBannerBkgd && (
-        <div className="absolute left-0 top-0 -z-10 h-full w-full">
-          <div className="relative h-full w-full">
-            <Image
-              className="object-cover"
-              src={paragraph.sumPillBannerBkgd.mediaImage.url}
-              alt={paragraph.sumPillBannerBkgd.mediaImage.alt || ""}
-              fill
-              sizes="(max-width: 1500px) 1500px, 100vw"
-            />
+    <ScreenCentered>
+      <Element
+        {...props}
+        className={twMerge("!mt-0", props.className)}
+        aria-labelledby={paragraph.sumPillBannerHeadline ? paragraph.id : undefined}
+      >
+        {paragraph.sumPillBannerBkgd && (
+          <div className="absolute left-0 top-0 -z-10 h-full w-full">
+            <div className="relative h-full w-full">
+              <Image
+                className="object-cover"
+                src={paragraph.sumPillBannerBkgd.mediaImage.url}
+                alt={paragraph.sumPillBannerBkgd.mediaImage.alt || ""}
+                fill
+                sizes="(max-width: 1500px) 1500px, 100vw"
+              />
+            </div>
           </div>
-        </div>
-      )}
-      <div className="flex flex-col gap-20">
-        <div
-          className={twMerge(
-            "rs-pt-10 w-full bg-poppy-light pb-96 text-center lg:last:*:rs-mb-5",
-            clsx({
-              "bg-olive": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "olive",
-              "bg-spirited text-black-true":
-                behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited",
-              "bg-white": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "white",
-              "bg-spirited-dark": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited_dark",
-              "text-black-true": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited",
-              "text-white": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited_dark",
-            })
-          )}
-        >
-          <div className="gutters">
-            <div className="flex flex-col">
-              {paragraph.sumPillBannerHeadline && (
-                <H2 id={paragraph.id} className="mb-8 font-light">
-                  {paragraph.sumPillBannerHeadline}
-                </H2>
-              )}
+        )}
+        <div className="flex flex-col gap-20">
+          <div
+            className={twMerge(
+              "rs-pt-10 w-full bg-poppy-light pb-96 text-center lg:last:*:rs-mb-5",
+              clsx({
+                "bg-olive": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "olive",
+                "bg-spirited text-black-true":
+                  behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited",
+                "bg-white": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "white",
+                "bg-spirited-dark":
+                  behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited_dark",
+                "text-black-true": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited",
+                "text-white": behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited_dark",
+              })
+            )}
+          >
+            <div className="gutters">
+              <div className="flex flex-col">
+                {paragraph.sumPillBannerHeadline && (
+                  <H2 id={paragraph.id} className="mb-8 font-light">
+                    {paragraph.sumPillBannerHeadline}
+                  </H2>
+                )}
 
-              {paragraph.sumPillBannerSuphead && (
-                <div className="order-first mb-8">{paragraph.sumPillBannerSuphead}</div>
-              )}
-            </div>
+                {paragraph.sumPillBannerSuphead && (
+                  <div className="order-first mb-8">{paragraph.sumPillBannerSuphead}</div>
+                )}
+              </div>
 
-            <Wysiwyg
-              html={paragraph.sumPillBannerDescrip?.processed}
-              className="mx-auto w-full max-w-full sm:max-w-[392px] md:max-w-[507px] lg:max-w-[576px]"
-            />
+              <Wysiwyg
+                html={paragraph.sumPillBannerDescrip?.processed}
+                className="mx-auto w-full max-w-full sm:max-w-[392px] md:max-w-[507px] lg:max-w-[576px]"
+              />
 
-            {paragraph.sumPillBannerLink?.url && (
-              <ActionLink
-                href={paragraph.sumPillBannerLink.url}
-                className={twMerge(
-                  "rs-mt-3 mx-auto text-black-true hocus:text-black-true",
-                  clsx({
-                    "text-white hocus:text-white":
-                      behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited_dark",
-                  })
-                )}
-              >
-                {paragraph.sumPillBannerLink.title}
-              </ActionLink>
-            )}
+              {paragraph.sumPillBannerLink?.url && (
+                <ActionLink
+                  href={paragraph.sumPillBannerLink.url}
+                  className={twMerge(
+                    "rs-mt-3 mx-auto text-black-true hocus:text-black-true",
+                    clsx({
+                      "text-white hocus:text-white":
+                        behaviors.sum_pill_banner_behaviors?.sum_pill_banner_overlay_bkg === "spirited_dark",
+                    })
+                  )}
+                >
+                  {paragraph.sumPillBannerLink.title}
+                </ActionLink>
+              )}
+            </div>
           </div>
-        </div>
 
-        {paragraph.sumPillBannerCards && (
-          <div className="rs-mb-8 centered -mt-96 flex w-full flex-col gap-20 lg:flex-row">
-            {paragraph.sumPillBannerCards.map(card => (
-              <PillBannerCard key={card.id} card={card} headingLevel={Element === "div" ? "h2" : "h3"} />
-            ))}
-          </div>
-        )}
-      </div>
-    </Element>
+          {paragraph.sumPillBannerCards && (
+            <div className="rs-mb-8 centered -mt-96 flex w-full flex-col gap-20 lg:flex-row">
+              {paragraph.sumPillBannerCards.map(card => (
+                <PillBannerCard key={card.id} card={card} headingLevel={Element === "div" ? "h2" : "h3"} />
+              ))}
+            </div>
+          )}
+        </div>
+      </Element>
+    </ScreenCentered>
   )
 }
 
diff --git a/src/components/paragraphs/sum-testimonial-banner/sum-testimonial-banner-paragraph.tsx b/src/components/paragraphs/sum-testimonial-banner/sum-testimonial-banner-paragraph.tsx
index 3c062562..2e11f818 100644
--- a/src/components/paragraphs/sum-testimonial-banner/sum-testimonial-banner-paragraph.tsx
+++ b/src/components/paragraphs/sum-testimonial-banner/sum-testimonial-banner-paragraph.tsx
@@ -9,6 +9,7 @@ import {H2} from "@components/elements/headers"
 import Wysiwyg from "@components/elements/wysiwyg"
 import YoutubeVideoPill from "@components/elements/youtube-video-pill"
 import ActionLink from "@components/elements/action-link"
+import ScreenCentered from "@components/elements/screen-centered"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphSumTestimonial
@@ -38,135 +39,134 @@ const SumTestimonialBannerParagraph = ({paragraph, ...props}: Props) => {
   }
 
   return (
-    <article
-      {...props}
-      className={twMerge(
-        "relative left-1/2 !mt-0 grid w-screen -translate-x-1/2 @container lg:grid-cols-3",
-        props.className
-      )}
-      aria-labelledby={paragraph.id}
-    >
-      <div
-        className={twMerge(
-          "relative h-[257px] w-full border-white lg:col-span-1 lg:h-full",
-          clsx({
-            "order-last border-t-2 lg:border-l-2 lg:border-t-0": leftText,
-            "border-b-2 lg:border-b-0 lg:border-r-2": !leftText,
-          })
-        )}
+    <ScreenCentered>
+      <article
+        {...props}
+        className={twMerge("!mt-0 grid @container lg:grid-cols-3", props.className)}
+        aria-labelledby={paragraph.id}
       >
-        <Image
-          className="object-cover"
-          src={paragraph.sumTestimonialBkgImg.mediaImage.url}
-          alt={paragraph.sumTestimonialBkgImg.mediaImage.alt || ""}
-          fill
-          sizes="(max-width: 768px) 100vw, 50vw"
-        />
+        <div
+          className={twMerge(
+            "relative h-[257px] w-full border-white lg:col-span-1 lg:h-full",
+            clsx({
+              "order-last border-t-2 lg:border-l-2 lg:border-t-0": leftText,
+              "border-b-2 lg:border-b-0 lg:border-r-2": !leftText,
+            })
+          )}
+        >
+          <Image
+            className="object-cover"
+            src={paragraph.sumTestimonialBkgImg.mediaImage.url}
+            alt={paragraph.sumTestimonialBkgImg.mediaImage.alt || ""}
+            fill
+            sizes="(max-width: 768px) 100vw, 50vw"
+          />
 
-        {paragraph.sumTestimonialHsVideo.__typename === "MediaImage" && (
-          <div
-            className={twMerge(
-              "absolute flex h-fit w-full justify-center lg:h-full lg:w-fit lg:items-center",
-              clsx({
-                "left-0 top-[-75px] sm:top-[-100px] lg:top-0": leftText,
-                "bottom-[75px] right-0 sm:bottom-[100px] lg:bottom-0": !leftText,
-              })
-            )}
-          >
-            <div className="absolute aspect-1 w-[150px] overflow-hidden rounded-full border-4 border-white sm:w-[200px] lg:w-[250px] xl:w-[300px] 2xl:w-[400px]">
-              <Image
-                className="object-cover"
-                src={paragraph.sumTestimonialHsVideo.mediaImage.url}
-                alt={paragraph.sumTestimonialHsVideo.mediaImage.alt || ""}
-                fill
-                sizes="400px"
-              />
+          {paragraph.sumTestimonialHsVideo.__typename === "MediaImage" && (
+            <div
+              className={twMerge(
+                "absolute flex h-fit w-full justify-center lg:h-full lg:w-fit lg:items-center",
+                clsx({
+                  "left-0 top-[-75px] sm:top-[-100px] lg:top-0": leftText,
+                  "bottom-[75px] right-0 sm:bottom-[100px] lg:bottom-0": !leftText,
+                })
+              )}
+            >
+              <div className="absolute aspect-1 w-[150px] overflow-hidden rounded-full border-4 border-white sm:w-[200px] lg:w-[250px] xl:w-[300px] 2xl:w-[400px]">
+                <Image
+                  className="object-cover"
+                  src={paragraph.sumTestimonialHsVideo.mediaImage.url}
+                  alt={paragraph.sumTestimonialHsVideo.mediaImage.alt || ""}
+                  fill
+                  sizes="400px"
+                />
+              </div>
             </div>
-          </div>
-        )}
+          )}
 
-        {paragraph.sumTestimonialHsVideo.__typename === "MediaVideo" && (
-          <div
-            className={twMerge(
-              "absolute flex h-fit w-full justify-center lg:h-full lg:w-fit lg:items-center",
-              clsx({
-                "bottom-[30px] right-0 sm:bottom-[50px] lg:-left-[125px] lg:bottom-0 lg:top-0 xl:-left-[150px] 2xl:-left-[200px]":
-                  leftText,
-                "right-0 top-[30px] sm:top-[50px] lg:-right-[125px] lg:bottom-0 lg:top-0 xl:-right-[150px] 2xl:-right-[200px]":
-                  !leftText,
-              })
-            )}
-          >
-            <YoutubeVideoPill
-              videoUrl={paragraph.sumTestimonialHsVideo.mediaOembedVideo}
-              className="aspect-[9/16] h-fit w-[250px] rounded-full border-4 border-white sm:w-[400px] lg:w-[250px] xl:w-[300px] 2xl:w-[400px]"
-            />
-          </div>
-        )}
-      </div>
+          {paragraph.sumTestimonialHsVideo.__typename === "MediaVideo" && (
+            <div
+              className={twMerge(
+                "absolute flex h-fit w-full justify-center lg:h-full lg:w-fit lg:items-center",
+                clsx({
+                  "bottom-[30px] right-0 sm:bottom-[50px] lg:-left-[125px] lg:bottom-0 lg:top-0 xl:-left-[150px] 2xl:-left-[200px]":
+                    leftText,
+                  "right-0 top-[30px] sm:top-[50px] lg:-right-[125px] lg:bottom-0 lg:top-0 xl:-right-[150px] 2xl:-right-[200px]":
+                    !leftText,
+                })
+              )}
+            >
+              <YoutubeVideoPill
+                videoUrl={paragraph.sumTestimonialHsVideo.mediaOembedVideo}
+                className="aspect-[9/16] h-fit w-[250px] rounded-full border-4 border-white sm:w-[400px] lg:w-[250px] xl:w-[300px] 2xl:w-[400px]"
+              />
+            </div>
+          )}
+        </div>
 
-      <div
-        className={twMerge(
-          "border-white bg-poppy-light lg:col-span-2",
-          clsx({
-            "border-b-2 lg:border-b-0 lg:border-r-2": leftText,
-            "border-t-2 lg:border-l-2 lg:border-t-0": !leftText,
-            "rs-pt-10 pb-[150px] lg:rs-pb-9 md:pb-[200px]":
-              leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaImage",
-            "rs-pb-9 pt-[150px] lg:rs-pt-10 md:pt-[200px]":
-              !leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaImage",
-            "rs-pt-9 pb-[250px] lg:rs-pb-10 sm:pb-[650px] md:pb-[520px] lg:pb-[250px]":
-              leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaVideo",
-            "rs-pb-10 pt-[250px] lg:rs-pt-10 sm:pt-[650px] md:pt-[520px] lg:pt-[250px]":
-              !leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaVideo",
-            "bg-olive": behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "olive",
-            "bg-spirited text-black-true":
-              behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "spirited",
-            "bg-white": behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "white",
-            "bg-spirited-dark text-white":
-              behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "spirited_dark",
-          })
-        )}
-      >
         <div
           className={twMerge(
-            "centered sm:max-w-[440px] lg:max-w-full",
+            "border-white bg-poppy-light lg:col-span-2",
             clsx({
-              "2xl:rs-pl-10 lg:mr-0 lg:pl-32 lg:pr-[200px] xl:pl-40 xl:pr-[250px] 4xl:ml-auto 4xl:w-2/3": leftText,
-              "2xl:rs-pr-10 lg:ml-0 lg:pl-[200px] lg:pr-32 xl:pl-[250px] xl:pr-40": !leftText,
+              "border-b-2 lg:border-b-0 lg:border-r-2": leftText,
+              "border-t-2 lg:border-l-2 lg:border-t-0": !leftText,
+              "rs-pt-10 pb-[150px] lg:rs-pb-9 md:pb-[200px]":
+                leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaImage",
+              "rs-pb-9 pt-[150px] lg:rs-pt-10 md:pt-[200px]":
+                !leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaImage",
+              "rs-pt-9 pb-[250px] lg:rs-pb-10 sm:pb-[650px] md:pb-[520px] lg:pb-[250px]":
+                leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaVideo",
+              "rs-pb-10 pt-[250px] lg:rs-pt-10 sm:pt-[650px] md:pt-[520px] lg:pt-[250px]":
+                !leftText && paragraph.sumTestimonialHsVideo.__typename === "MediaVideo",
+              "bg-olive": behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "olive",
+              "bg-spirited text-black-true":
+                behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "spirited",
+              "bg-white": behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "white",
+              "bg-spirited-dark text-white":
+                behaviors.sum_testimonial_banner?.sum_testimonial_banner_overlay_bkg === "spirited_dark",
             })
           )}
         >
-          <H2
-            id={paragraph.id}
+          <div
             className={twMerge(
-              "rs-mb-3 font-light",
-              behaviors.sum_testimonial_banner?.sum_testimonial_banner_heading === "type_4" ? "type-4" : "type-5"
+              "centered sm:max-w-[440px] lg:max-w-full",
+              clsx({
+                "2xl:rs-pl-10 lg:mr-0 lg:pl-32 lg:pr-[200px] xl:pl-40 xl:pr-[250px] 4xl:ml-auto 4xl:w-2/3": leftText,
+                "2xl:rs-pr-10 lg:ml-0 lg:pl-[200px] lg:pr-32 xl:pl-[250px] xl:pr-40": !leftText,
+              })
             )}
           >
-            {paragraph.sumTestimonialHeading}
-          </H2>
+            <H2
+              id={paragraph.id}
+              className={twMerge(
+                "rs-mb-3 font-light",
+                behaviors.sum_testimonial_banner?.sum_testimonial_banner_heading === "type_4" ? "type-4" : "type-5"
+              )}
+            >
+              {paragraph.sumTestimonialHeading}
+            </H2>
 
-          <Wysiwyg className="rs-mb-3" html={paragraph.sumTestimonialDescrip.processed} />
+            <Wysiwyg className="rs-mb-3" html={paragraph.sumTestimonialDescrip.processed} />
 
-          {paragraph.sumTestimonialName && <div className="font-19">{paragraph.sumTestimonialName}</div>}
+            {paragraph.sumTestimonialName && <div className="font-19">{paragraph.sumTestimonialName}</div>}
 
-          {(paragraph.sumTestimonialUniv || studentType) && (
-            <div className="font-19">{`${paragraph.sumTestimonialUniv || ""} ${studentType || ""}`.trim()}</div>
-          )}
-          {paragraph.sumTestimonialAffi && <div className="font-19">{paragraph.sumTestimonialAffi}</div>}
+            {(paragraph.sumTestimonialUniv || studentType) && (
+              <div className="font-19">{`${paragraph.sumTestimonialUniv || ""} ${studentType || ""}`.trim()}</div>
+            )}
+            {paragraph.sumTestimonialAffi && <div className="font-19">{paragraph.sumTestimonialAffi}</div>}
 
-          {paragraph.sumTestimonialButton?.url && (
-            <ActionLink
-              className="btn rs-mt-5 rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
-              href={paragraph.sumTestimonialButton.url}
-            >
-              {paragraph.sumTestimonialButton.title}
-            </ActionLink>
-          )}
+            {paragraph.sumTestimonialButton?.url && (
+              <ActionLink
+                className="btn rs-mt-5 rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
+                href={paragraph.sumTestimonialButton.url}
+              >
+                {paragraph.sumTestimonialButton.title}
+              </ActionLink>
+            )}
+          </div>
         </div>
-      </div>
-    </article>
+      </article>
+    </ScreenCentered>
   )
 }
 export default SumTestimonialBannerParagraph