From 1116c7bda8bfe87b23252f801aa33863f7b0a98b Mon Sep 17 00:00:00 2001
From: Jariel Rodriguez <jarielrrz@gmail.com>
Date: Thu, 18 Jun 2026 09:13:29 -0400
Subject: [PATCH 1/5] Add vertical spacing between Highlight and Callout in
 rich text

---
 changelogs/DP-41032.yml                         | 6 ++++++
 packages/assets/scss/03-organisms/_callout.scss | 8 ++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 changelogs/DP-41032.yml

diff --git a/changelogs/DP-41032.yml b/changelogs/DP-41032.yml
new file mode 100644
index 0000000000..906e3fa386
--- /dev/null
+++ b/changelogs/DP-41032.yml
@@ -0,0 +1,6 @@
+Fixed:
+  - project: Patternlab
+    component: Callout
+    description: Add vertical spacing between Highlight and Callout in rich text.
+    issue: DP-41032
+    impact: Patch
diff --git a/packages/assets/scss/03-organisms/_callout.scss b/packages/assets/scss/03-organisms/_callout.scss
index 0c27fdbe66..bb702c2f53 100644
--- a/packages/assets/scss/03-organisms/_callout.scss
+++ b/packages/assets/scss/03-organisms/_callout.scss
@@ -5,6 +5,14 @@
   padding-left:20px;
   margin-bottom: 45px;
 
+  .rich-text .ma__callout-alert + & {
+    margin-top: 17px;
+
+    @media ($bp-small-min) {
+      margin-top: 32px;
+    }
+  }
+
   @media ($bp-x-small-min) {
     padding-left:38px;
   }

From 4d0bff547835213ea6d89c002225a9caaabd9340 Mon Sep 17 00:00:00 2001
From: Jariel Rodriguez <jarielrrz@gmail.com>
Date: Mon, 22 Jun 2026 11:37:11 -0400
Subject: [PATCH 2/5] Stylelint fixes

---
 changelogs/DP-41032.yml                                 | 2 +-
 packages/assets/scss/01-atoms/_buttons.scss             | 2 ++
 packages/assets/scss/02-molecules/_inline-message.scss  | 6 ++++++
 packages/assets/scss/03-organisms/_modal.scss           | 6 ++++++
 packages/assets/scss/03-organisms/_process-stepper.scss | 4 ++++
 5 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/changelogs/DP-41032.yml b/changelogs/DP-41032.yml
index 906e3fa386..85fe94b476 100644
--- a/changelogs/DP-41032.yml
+++ b/changelogs/DP-41032.yml
@@ -1,5 +1,5 @@
 Fixed:
-  - project: Patternlab
+  - project: Assets
     component: Callout
     description: Add vertical spacing between Highlight and Callout in rich text.
     issue: DP-41032
diff --git a/packages/assets/scss/01-atoms/_buttons.scss b/packages/assets/scss/01-atoms/_buttons.scss
index 3fccf5f5f6..4242025423 100644
--- a/packages/assets/scss/01-atoms/_buttons.scss
+++ b/packages/assets/scss/01-atoms/_buttons.scss
@@ -54,7 +54,9 @@ button {
   }
 
   // Prevents buttons inside rich-text from inheriting link border-bottom underlines on hover
+
   &:not(&--quaternary) {
+
     .ma__rich-text & {
       border-bottom: none;
 
diff --git a/packages/assets/scss/02-molecules/_inline-message.scss b/packages/assets/scss/02-molecules/_inline-message.scss
index ec77d186d5..74833dd2df 100644
--- a/packages/assets/scss/02-molecules/_inline-message.scss
+++ b/packages/assets/scss/02-molecules/_inline-message.scss
@@ -3,6 +3,7 @@
 // Inline Message molecule.
 // Supported variants: info (default), warning.
 // Structure: icon + heading on same row; paragraph below full-width.
+
 .ma__inline-message {
   background-color: var(--mf-c-bay-blue-lightest, #f1f4f6); // Design token — light blue background
   border: 1px solid var(--mf-c-bd-divider, #d5dce0);
@@ -12,6 +13,7 @@
   overflow: auto;
 
   // Top row: icon + bold heading on same horizontal line
+
   &__header {
     display: flex;
     align-items: center;
@@ -37,8 +39,11 @@
   }
 
   // Body: paragraph text — full-width below the header row
+
   &__content {
+
     .ma__rich-text {
+
       >*:first-child {
         margin-top: 0;
       }
@@ -51,6 +56,7 @@
   }
 
   // Warning variant — yellow icon tint, background, and border
+
   &--warning {
     background-color: var(--mf-c-duckling-yellow-lightest, #fef9e8);
     border-color: var(--mf-c-duckling-yellow-lighter, #fbe28d);
diff --git a/packages/assets/scss/03-organisms/_modal.scss b/packages/assets/scss/03-organisms/_modal.scss
index d59e3ba034..3a724a18e4 100644
--- a/packages/assets/scss/03-organisms/_modal.scss
+++ b/packages/assets/scss/03-organisms/_modal.scss
@@ -20,18 +20,24 @@
 }
 
 // Portaled translate modal (see modal.js) — full viewport above the hamburger nav.
+
 html > .ma__modal-overlay.ma__modal--translate.ma__active {
   position: fixed;
   inset: 0;
   width: 100%;
   min-height: 100vh;
+
+  /* stylelint-disable-next-line unit-no-unknown */
   min-height: 100dvh;
   z-index: $z-skyline;
 }
 
 // Hide the open drawer and its dim overlay while the translate modal is open on mobile.
+
 body.ma__translate-modal-open {
+
   @media ($bp-header-toggle-max) {
+
     .ma__header__hamburger__nav-container,
     .menu-overlay.overlay-open {
       visibility: hidden;
diff --git a/packages/assets/scss/03-organisms/_process-stepper.scss b/packages/assets/scss/03-organisms/_process-stepper.scss
index 9b038da9cd..691cfaa76c 100644
--- a/packages/assets/scss/03-organisms/_process-stepper.scss
+++ b/packages/assets/scss/03-organisms/_process-stepper.scss
@@ -7,10 +7,12 @@
   .post-content > &,
   .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
   .main-content--full .page-content > & {
+
     @include ma-container('restricted');
   }
 
   &__items {
+
     @include ma-reset-list;
     counter-reset: process-step-counter;
     border: 1px solid var(--mf-c-bd-divider, #d5dce0);
@@ -42,7 +44,9 @@
   }
 
   // Mobile: full-width, remove outer card border, keep horizontal step dividers
+
   @media (#{$bp-medium-max}) {
+
     &__items {
       border: none;
       border-radius: 0;

From 4a01df96de85ab67cf7e7cff19ac50a1768d63eb Mon Sep 17 00:00:00 2001
From: Jariel Rodriguez <jarielrrz@gmail.com>
Date: Mon, 22 Jun 2026 15:46:46 -0400
Subject: [PATCH 3/5] Update _callout-alert.scss

---
 packages/assets/scss/03-organisms/_callout-alert.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss
index 35f32eed4f..260a9bd37d 100644
--- a/packages/assets/scss/03-organisms/_callout-alert.scss
+++ b/packages/assets/scss/03-organisms/_callout-alert.scss
@@ -15,7 +15,7 @@
     @include ma-component-spacing('large');
   }
 
-  .rich-text & {
+  .ma__rich-text & {
     margin-bottom: 1.75rem;
   }
 
@@ -67,6 +67,14 @@
 
 }
 
+.ma__rich-text .ma__callout-alert + .ma__callout-time {
+  margin-top: 17px;
+
+  @media ($bp-small-min) {
+    margin-top: 32px;
+  }
+}
+
 //theme
 
 .ma__callout-alert {

From e789c2c5bdb04bec0e2c5e6818d30880f85f90fe Mon Sep 17 00:00:00 2001
From: Jariel Rodriguez <jarielrrz@gmail.com>
Date: Mon, 22 Jun 2026 15:46:48 -0400
Subject: [PATCH 4/5] Update _callout.scss

---
 packages/assets/scss/03-organisms/_callout.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/assets/scss/03-organisms/_callout.scss b/packages/assets/scss/03-organisms/_callout.scss
index bb702c2f53..0c27fdbe66 100644
--- a/packages/assets/scss/03-organisms/_callout.scss
+++ b/packages/assets/scss/03-organisms/_callout.scss
@@ -5,14 +5,6 @@
   padding-left:20px;
   margin-bottom: 45px;
 
-  .rich-text .ma__callout-alert + & {
-    margin-top: 17px;
-
-    @media ($bp-small-min) {
-      margin-top: 32px;
-    }
-  }
-
   @media ($bp-x-small-min) {
     padding-left:38px;
   }

From 1763e51d33d8d3ae3da64847f72bfcf97f242f6a Mon Sep 17 00:00:00 2001
From: Jariel Rodriguez <jarielrrz@gmail.com>
Date: Tue, 23 Jun 2026 13:50:36 -0400
Subject: [PATCH 5/5] Add vertical spacing for Highlight and callout components
 in rich text.

---
 changelogs/DP-41032.yml                       |   2 +-
 packages/assets/scss/01-atoms/_buttons.scss   | 248 +++++++--------
 .../scss/03-organisms/_action-finder.scss     |  16 +
 .../scss/03-organisms/_callout-alert.scss     | 282 +++++++++---------
 .../scss/03-organisms/_callout-time.scss      | 131 ++++----
 5 files changed, 355 insertions(+), 324 deletions(-)

diff --git a/changelogs/DP-41032.yml b/changelogs/DP-41032.yml
index 85fe94b476..d92d9adc84 100644
--- a/changelogs/DP-41032.yml
+++ b/changelogs/DP-41032.yml
@@ -1,6 +1,6 @@
 Fixed:
   - project: Assets
     component: Callout
-    description: Add vertical spacing between Highlight and Callout in rich text.
+    description: Add vertical spacing for Highlight and callout components in rich text.
     issue: DP-41032
     impact: Patch
diff --git a/packages/assets/scss/01-atoms/_buttons.scss b/packages/assets/scss/01-atoms/_buttons.scss
index 4242025423..429fadf660 100644
--- a/packages/assets/scss/01-atoms/_buttons.scss
+++ b/packages/assets/scss/01-atoms/_buttons.scss
@@ -1,124 +1,124 @@
-@use "00-base/configure" as *;
-
-$primarycolors: (
-  "c-primary-alt": $c-primary-alt,
-  "c-highlight": $c-highlight,
-  "c-black": $c-gray-darkest,
-  "c-gray-dark": $c-gray-dark,
-  "c-white": $c-white
-);
-
-
-button {
-  cursor: pointer;
-  font-family: $fonts;
-  font-weight: $fonts-light;
-}
-
-.ma__button {
-
-  @include ma-button-base;
-  text-transform: none;
-  letter-spacing: $letter-spacing-small;
-
-  &--uppercase {
-    text-transform: uppercase;
-    letter-spacing: $letter-spacing-large;
-  }
-
-  svg {
-    margin-left: .5rem;
-    flex-shrink: 0;
-  }
-
-  @include ma-button-size;
-
-  &--small {
-
-    @include ma-button-size("small");
-    padding: 0.2em 0.6em;
-  }
-
-  &--large {
-
-    @include ma-button-size("large");
-  }
-
-  @include ma-button("solid",$c-primary);
-
-  @each $class, $c in $primarycolors {
-    &--#{$class} {
-
-      @include ma-button("solid",$c);
-    }
-  }
-
-  // Prevents buttons inside rich-text from inheriting link border-bottom underlines on hover
-
-  &:not(&--quaternary) {
-
-    .ma__rich-text & {
-      border-bottom: none;
-
-      &:hover:not(:disabled) {
-        border-bottom: none;
-      }
-    }
-  }
-
-}
-
-.ma__button--secondary {
-
-  @include ma-button("outline",$c-primary);
-
-  &.ma__button--c-primary-alt {
-
-    @include ma-button("outline",$c-primary-alt);
-  }
-
-  &.ma__button--c-highlight {
-
-    @include ma-button("outline",$c-highlight);
-  }
-
-  &.ma__button--c-gray-dark {
-
-    @include ma-button("outline",$c-gray-dark);
-  }
-}
-
-.ma__button--tertiary {
-
-  @include ma-button("solid",$c-gray-light);
-  color: var(--mf-c-font-base);
-
-  svg {
-    color: var(--mf-c-gray-darkest);
-  }
-}
-
-.ma__button--quaternary {
-  background-color: transparent;
-  box-shadow: none;
-  border: none;
-  border-bottom: 2px solid var(--mf-c-link);
-  color: var(--mf-c-primary);
-  padding: 0;
-  text-transform: none;
-  letter-spacing: $letter-spacing-default;
-
-  svg {
-    color: var(--mf-c-primary);
-  }
-
-  &:hover:not(:disabled) {
-   border-bottom: 3px solid var(--mf-c-primary);
-   background-color: transparent;
-  }
-}
-
-.ma__button--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+@use "00-base/configure" as *;
+
+$primarycolors: (
+  "c-primary-alt": $c-primary-alt,
+  "c-highlight": $c-highlight,
+  "c-black": $c-gray-darkest,
+  "c-gray-dark": $c-gray-dark,
+  "c-white": $c-white
+);
+
+
+button {
+  cursor: pointer;
+  font-family: $fonts;
+  font-weight: $fonts-light;
+}
+
+.ma__button {
+
+  @include ma-button-base;
+  text-transform: none;
+  letter-spacing: $letter-spacing-small;
+
+  &--uppercase {
+    text-transform: uppercase;
+    letter-spacing: $letter-spacing-large;
+  }
+
+  svg {
+    margin-left: .5rem;
+    flex-shrink: 0;
+  }
+
+  @include ma-button-size;
+
+  &--small {
+
+    @include ma-button-size("small");
+    padding: 0.2em 0.6em;
+  }
+
+  &--large {
+
+    @include ma-button-size("large");
+  }
+
+  @include ma-button("solid",$c-primary);
+
+  @each $class, $c in $primarycolors {
+    &--#{$class} {
+
+      @include ma-button("solid",$c);
+    }
+  }
+
+  // Prevents buttons inside rich-text from inheriting link border-bottom underlines on hover
+
+  &:not(&--quaternary) {
+
+    .ma__rich-text & {
+      border-bottom: none;
+
+      &:hover:not(:disabled) {
+        border-bottom: none;
+      }
+    }
+  }
+
+}
+
+.ma__button--secondary {
+
+  @include ma-button("outline",$c-primary);
+
+  &.ma__button--c-primary-alt {
+
+    @include ma-button("outline",$c-primary-alt);
+  }
+
+  &.ma__button--c-highlight {
+
+    @include ma-button("outline",$c-highlight);
+  }
+
+  &.ma__button--c-gray-dark {
+
+    @include ma-button("outline",$c-gray-dark);
+  }
+}
+
+.ma__button--tertiary {
+
+  @include ma-button("solid",$c-gray-light);
+  color: var(--mf-c-font-base);
+
+  svg {
+    color: var(--mf-c-gray-darkest);
+  }
+}
+
+.ma__button--quaternary {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  border-bottom: 2px solid var(--mf-c-link);
+  color: var(--mf-c-primary);
+  padding: 0;
+  text-transform: none;
+  letter-spacing: $letter-spacing-default;
+
+  svg {
+    color: var(--mf-c-primary);
+  }
+
+  &:hover:not(:disabled) {
+   border-bottom: 3px solid var(--mf-c-primary);
+   background-color: transparent;
+  }
+}
+
+.ma__button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
diff --git a/packages/assets/scss/03-organisms/_action-finder.scss b/packages/assets/scss/03-organisms/_action-finder.scss
index 265ce34d88..de5f97d062 100644
--- a/packages/assets/scss/03-organisms/_action-finder.scss
+++ b/packages/assets/scss/03-organisms/_action-finder.scss
@@ -27,6 +27,22 @@ $action-finder-bp: 900px;
     }
   }
 
+  .ma__rich-text & {
+    margin-bottom: 1.5rem;
+
+    @media ($bp-small-min) {
+      margin-bottom: 1.75rem;
+    }
+
+    &:not(:first-child) {
+      margin-top: 1.5rem;
+
+      @media ($bp-small-min) {
+        margin-top: 1.75rem;
+      }
+    }
+  }
+
   &__container {
 
     @include ma-container;
diff --git a/packages/assets/scss/03-organisms/_callout-alert.scss b/packages/assets/scss/03-organisms/_callout-alert.scss
index 260a9bd37d..2b13ba09c2 100644
--- a/packages/assets/scss/03-organisms/_callout-alert.scss
+++ b/packages/assets/scss/03-organisms/_callout-alert.scss
@@ -1,139 +1,143 @@
-@use "00-base/configure" as *;
-
-@use "sass:color" as *;
-
-.ma__callout-alert {
-
-  .pre-content > &,
-  .post-content > &,
-  .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
-  .main-content .page-content .layout--onecol-mass-service-section .layout__region--content .js-lpb-component  > &,
-  .main-content.main-content--full .page-content > & {
-
-    @include ma-container('restricted');
-
-    @include ma-component-spacing('large');
-  }
-
-  .ma__rich-text & {
-    margin-bottom: 1.75rem;
-  }
-
-  &__content {
-    border: 3px solid;
-    display: block;
-    padding: 15px 20px;
-    padding-left: 60px;
-    position: relative;
-
-    @media ($bp-small-min) {
-      padding: 30px;
-      padding-left: 72px;
-    }
-  }
-
-  &__icon {
-    font-size: 0; // removing white-space;
-    position: absolute;
-      top: 50%;
-      left:20px;
-    transform: translateY(-50%);
-
-    @media ($bp-small-min) {
-      left: 30px;
-    }
-  }
-
-  &__link {
-    font-size: $fonts-xlarge;
-    line-height: 1.3;
-    padding-right: 18px;
-
-    & > span {
-
-      @include ma-link-underline;
-      display: inline;
-
-      svg {
-        display: inline-block;
-        padding-top: 0.1em;
-      }
-    }
-  }
-
-  &:hover &__link span {
-    border-bottom: 3px solid;
-  }
-
-}
-
-.ma__rich-text .ma__callout-alert + .ma__callout-time {
-  margin-top: 17px;
-
-  @media ($bp-small-min) {
-    margin-top: 32px;
-  }
-}
-
-//theme
-
-.ma__callout-alert {
-
-  //default
-
-  &__content {
-    color: var(--mf-c-font-base);
-    background-color: mix($c-white, $c-warning, 90%);
-    border-color: mix($c-white, $c-warning, 50%);
-    box-shadow: $box-shadow;
-  }
-
-  &__link {
-    font-weight: bold;
-  }
-
-  &:hover &__link span {
-    border-color: rgba($c-font-base,.5);
-  }
-
-  //c-primary
-
-  &--c-primary &__content {
-    background-color: mix($c-white, $c-primary, 90%);
-    border-color: mix($c-white, $c-primary, 50%);
-    box-shadow: $box-shadow;
-  }
-
-  //c-primary-alt
-
-  &--c-primary-alt &__content {
-    background-color: mix($c-white, $c-primary-alt, 90%);
-    border-color: mix($c-white, $c-primary-alt, 50%);
-    box-shadow: $box-shadow;
-  }
-
-  //c-gray-dark
-
-  &--c-gray-dark &__content {
-    background-color: mix($c-white, $c-gray-dark, 90%);
-    border-color: mix($c-white, $c-gray-dark, 50%);
-    box-shadow: $box-shadow;
-  }
-
-  //c-error-red
-
-  &--c-error-red &__content {
-    background-color: mix($c-white, $c-error-red, 90%);
-    border-color: mix($c-white, $c-error-red, 50%);
-    box-shadow: $box-shadow;
-  }
-
-  //c-white
-
-  &--c-white &__content {
-    background-color: mix($c-white, $c-white, 90%);
-    border-color: mix($c-white, $c-gray-dark, 50%);
-    box-shadow: $box-shadow;
-  }
-
-}
+@use "00-base/configure" as *;
+
+@use "sass:color" as *;
+
+.ma__callout-alert {
+
+  .pre-content > &,
+  .post-content > &,
+  .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
+  .main-content .page-content .layout--onecol-mass-service-section .layout__region--content .js-lpb-component  > &,
+  .main-content.main-content--full .page-content > & {
+
+    @include ma-container('restricted');
+
+    @include ma-component-spacing('large');
+  }
+
+  .ma__rich-text & {
+    margin-bottom: 1.5rem;
+
+    @media ($bp-small-min) {
+      margin-bottom: 1.75rem;
+    }
+
+    &:not(:first-child) {
+      margin-top: 1.5rem;
+
+      @media ($bp-small-min) {
+        margin-top: 1.75rem;
+      }
+    }
+  }
+
+  &__content {
+    border: 3px solid;
+    display: block;
+    padding: 15px 20px;
+    padding-left: 60px;
+    position: relative;
+
+    @media ($bp-small-min) {
+      padding: 30px;
+      padding-left: 72px;
+    }
+  }
+
+  &__icon {
+    font-size: 0; // removing white-space;
+    position: absolute;
+      top: 50%;
+      left:20px;
+    transform: translateY(-50%);
+
+    @media ($bp-small-min) {
+      left: 30px;
+    }
+  }
+
+  &__link {
+    font-size: $fonts-xlarge;
+    line-height: 1.3;
+    padding-right: 18px;
+
+    & > span {
+
+      @include ma-link-underline;
+      display: inline;
+
+      svg {
+        display: inline-block;
+        padding-top: 0.1em;
+      }
+    }
+  }
+
+  &:hover &__link span {
+    border-bottom: 3px solid;
+  }
+
+}
+
+//theme
+
+.ma__callout-alert {
+
+  //default
+
+  &__content {
+    color: var(--mf-c-font-base);
+    background-color: mix($c-white, $c-warning, 90%);
+    border-color: mix($c-white, $c-warning, 50%);
+    box-shadow: $box-shadow;
+  }
+
+  &__link {
+    font-weight: bold;
+  }
+
+  &:hover &__link span {
+    border-color: rgba($c-font-base,.5);
+  }
+
+  //c-primary
+
+  &--c-primary &__content {
+    background-color: mix($c-white, $c-primary, 90%);
+    border-color: mix($c-white, $c-primary, 50%);
+    box-shadow: $box-shadow;
+  }
+
+  //c-primary-alt
+
+  &--c-primary-alt &__content {
+    background-color: mix($c-white, $c-primary-alt, 90%);
+    border-color: mix($c-white, $c-primary-alt, 50%);
+    box-shadow: $box-shadow;
+  }
+
+  //c-gray-dark
+
+  &--c-gray-dark &__content {
+    background-color: mix($c-white, $c-gray-dark, 90%);
+    border-color: mix($c-white, $c-gray-dark, 50%);
+    box-shadow: $box-shadow;
+  }
+
+  //c-error-red
+
+  &--c-error-red &__content {
+    background-color: mix($c-white, $c-error-red, 90%);
+    border-color: mix($c-white, $c-error-red, 50%);
+    box-shadow: $box-shadow;
+  }
+
+  //c-white
+
+  &--c-white &__content {
+    background-color: mix($c-white, $c-white, 90%);
+    border-color: mix($c-white, $c-gray-dark, 50%);
+    box-shadow: $box-shadow;
+  }
+
+}
diff --git a/packages/assets/scss/03-organisms/_callout-time.scss b/packages/assets/scss/03-organisms/_callout-time.scss
index 0947d624f8..b46d186ac3 100644
--- a/packages/assets/scss/03-organisms/_callout-time.scss
+++ b/packages/assets/scss/03-organisms/_callout-time.scss
@@ -1,60 +1,71 @@
-@use "00-base/configure" as *;
-
-.ma__callout-time {
-  position: relative;
-
-  .pre-content > &,
-  .post-content > &,
-  .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
-  .main-content--full .page-content > & {
-
-    @include ma-container('restricted');
-  }
-
-  .ma__rich-text__container & {
-
-    @include ma-component-spacing;
-  }
-
-  &__container {
-    position: relative;
-  }
-
-  &__icon {
-    font-size: 0;
-    height: 30px;
-    position: absolute;
-      top: 16%;
-      left: 0;
-    width: 30px;
-    color: var(--mf-c-primary-alt);
-
-    @media ($bp-medium-min) {
-      top: 10%;
-    }
-  }
-
-  &__text {
-    font-size: $fonts-large;
-    font-style: italic;
-    display: inline-block;
-    padding-left: 42px; // width of icon and margin
-  }
-}
-
-//theme
-
-.ma__callout-time {
-
-  &__icon {
-
-    & > svg {
-      fill: var(--mf-c-highlight);
-    }
-  }
-
-  &__text {
-    color: var(--mf-c-font-detail);
-    font-weight: $fonts-normal;
-  }
-}
+@use "00-base/configure" as *;
+
+.ma__callout-time {
+  position: relative;
+
+  .pre-content > &,
+  .post-content > &,
+  .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
+  .main-content--full .page-content > & {
+
+    @include ma-container('restricted');
+  }
+
+  .ma__rich-text & {
+    margin-bottom: 1.5rem;
+
+    @media ($bp-small-min) {
+      margin-bottom: 1.75rem;
+    }
+
+    &:not(:first-child) {
+      margin-top: 1.5rem;
+
+      @media ($bp-small-min) {
+        margin-top: 1.75rem;
+      }
+    }
+  }
+
+  &__container {
+    position: relative;
+  }
+
+  &__icon {
+    font-size: 0;
+    height: 30px;
+    position: absolute;
+      top: 16%;
+      left: 0;
+    width: 30px;
+    color: var(--mf-c-primary-alt);
+
+    @media ($bp-medium-min) {
+      top: 10%;
+    }
+  }
+
+  &__text {
+    font-size: $fonts-large;
+    font-style: italic;
+    display: inline-block;
+    padding-left: 42px; // width of icon and margin
+  }
+}
+
+//theme
+
+.ma__callout-time {
+
+  &__icon {
+
+    & > svg {
+      fill: var(--mf-c-highlight);
+    }
+  }
+
+  &__text {
+    color: var(--mf-c-font-detail);
+    font-weight: $fonts-normal;
+  }
+}