Refactor html/css for banner

Rename mixin to be more generic

Enhance responsiveness of component

simplify grid stacking

DDFFORM-540

src/stories/Library/banner/Banner.tsx

@@ -14,25 +14,29 @@ const Banner: FC<BannerType> = ({ link, image, title, description }) => {
   return (
     <a href={link} className="banner">
       {image && (
-        <div className="banner-visual">
+        <div className="banner__media-wrapper">
           <MediaContainer media={image} />
         </div>
       )}
-      <div className="banner__spacing">
+      <div
+        className={clsx("banner__content-wrapper", {
+          "banner__content-wrapper--no-image": !image,
+        })}
+      >
         <div
-          className={clsx("banner-content arrow__hover--right-large", {
-            "banner-content--no-image": !image,
+          className={clsx("banner__content arrow__hover--right-large", {
+            "banner__content--no-image": !image,
           })}
         >
-          <h2
-            className="banner-content__title"
-            // We need to be able to replicate our WYSIWYG field in Drupal that makes it possible to underline (<u>) words.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: title }}
-          />
-          {description && (
-            <p className="banner-content__description">{description}</p>
+          {title && (
+            <h2
+              className="banner__title"
+              // We need to be able to replicate our WYSIWYG field in Drupal that makes it possible to underline (<u>) words.
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: title }}
+            />
           )}
+          {description && <p className="banner__description">{description}</p>}
           <ArrowLargeRight />
         </div>
       </div>

src/stories/Library/banner/banner.scss

@@ -1,67 +1,77 @@
-@mixin banner-height {
-  height: 500px;
-  @include media-query__small {
-    height: 810px;
-  }
-}
-
-@mixin banner-text-margin {
-  margin-bottom: $s-md;
-  @include media-query__medium {
-    margin-bottom: $s-xl;
-  }
-}
+$_banner-content-wrapper-width: 944px;
+$_banner-content-max-width-small: 300px;
+$_banner-content-max-width-medium: 569px;
+$_banner-content-no-image-max-width-small: $layout__max-width--small;
+$_banner-height-small: 500px;
+$_banner-height-medium: 810px;
 
 .banner {
   @include layout-container($layout__max-width--large, 0);
-  @include banner-height;
+
   display: grid;
-  grid-template-rows: 1fr auto 1fr;
+  align-items: center;
   text-decoration: none;
+  box-sizing: border-box;
+  background-color: $color__global-secondary;
+  height: $_banner-height-small;
+
+  @include media-query__small {
+    height: $_banner-height-medium;
+  }
 }
 
-.banner__spacing {
-  @include layout-container($layout__max-width--medium, 0);
-  grid-row: 2;
+.banner__media-wrapper {
+  grid-row: 1;
   grid-column: 1;
+  height: $_banner-height-small;
+  @include media-query__small {
+    height: $_banner-height-medium;
+  }
 }
 
-.banner-content {
-  padding: $s-xl;
-  max-width: 90%;
-  background-color: white;
-
+.banner__content-wrapper {
+  @include layout-container($_banner-content-wrapper-width, 0);
+  width: 100%;
+  grid-row: 1;
+  grid-column: 1;
+  padding: $s-2xl $s-2xl $s-2xl 0;
   @include media-query__small {
-    padding: $s-2xl;
-    max-width: 60%;
+    padding-right: unset;
+  }
+  &--no-image {
+    padding: unset;
   }
+}
+
+.banner__content {
+  padding: $s-xl;
+  max-width: $_banner-content-max-width-small;
+  background-color: $color__global-white;
+  display: flex;
+  flex-direction: column;
+  gap: $s-md;
 
   &--no-image {
-    max-width: unset;
+    max-width: $_banner-content-max-width-small;
+    margin: 0 auto;
     background-color: unset;
     text-align: center;
+    align-items: center;
+  }
+  @include media-query__small {
+    gap: $s-lg;
+    padding: calc($s-2xl + 6px);
+    max-width: $_banner-content-max-width-medium;
   }
 }
 
-.banner-content__title {
-  @include typography($typo__h1);
-  @include underlined-title;
-  @include banner-text-margin;
+.banner__title {
+  @include typography($typo__h2);
+  @include u-extending-underline-style;
 }
 
-.banner-content__description {
-  @include typography($typo__body-medium);
-  @include banner-text-margin;
+.banner__description {
+  @include typography($typo__body-placeholder);
+  line-height: 160%;
   color: $color__global-grey;
 }
-
-.banner-visual {
-  grid-row: 1 / -1;
-  grid-column: 1;
-
-  img {
-    @include banner-height;
-    object-fit: cover;
-    object-position: center;
-  }
-}

src/styles/scss/tools/mixins.tools.scss

@@ -72,11 +72,11 @@
 }
 
 /**
- * Mixin `underlined-title` applies a custom underline effect to `<u>` elements.
+ * Mixin `u-extending-underline-style` applies a custom underline effect to `<u>` elements.
  * - Uses a pseudo-element (::after) with a positioned SVG image as the underline.
  * - Removes default text underline.
  */
-@mixin underlined-title {
+@mixin u-extending-underline-style {
   u {
     position: relative;
     text-decoration: none;