From 346e52310ee3af5355db58edc2d34e1235da2517 Mon Sep 17 00:00:00 2001
From: pkd2512 <PrasantaKumar.Dutta@thomsonreuters.com>
Date: Tue, 27 May 2025 13:28:41 +0100
Subject: [PATCH] fixes scss pattern

---
 src/components/Headpile/Headpile.svelte  |  4 ++--
 src/components/Headpile/KeyFigure.svelte | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Headpile/Headpile.svelte b/src/components/Headpile/Headpile.svelte
index 1c57229b..a9303f80 100644
--- a/src/components/Headpile/Headpile.svelte
+++ b/src/components/Headpile/Headpile.svelte
@@ -62,8 +62,8 @@
   }: Props = $props();
 </script>
 
-<Block class={cls} {id} {width}>
-  <div class="figures fmy-6">
+<Block class="fmy-6 {cls} {id} {width}">
+  <div class="figures">
     {#each figures as figure}
       <KeyFigure {...{ ...figure, colour: figure.colour ?? colour }} />
     {/each}
diff --git a/src/components/Headpile/KeyFigure.svelte b/src/components/Headpile/KeyFigure.svelte
index 356c2ff5..14e62666 100644
--- a/src/components/Headpile/KeyFigure.svelte
+++ b/src/components/Headpile/KeyFigure.svelte
@@ -22,10 +22,8 @@
       <Headshot {img} {colour} />
     </div>
     <div class="text">
-      <div class="title font-bold text-base leading-none">{name}</div>
-      <div
-        class="role font-note text-secondary text-sm font-light leading-tighter fmb-4 mt-1 pt-1"
-      >
+      <div class="title">{name}</div>
+      <div class="role">
         {role || ''}
       </div>
       {#if !mobile.current}
@@ -56,6 +54,10 @@
   }
 
   .title {
+    @include mixins.font-bold;
+    @include mixins.text-base;
+    @include mixins.leading-none;
+
     @media (max-width: 450px) {
       font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
     }
@@ -65,6 +67,15 @@
     border-block-start: 0.5px solid var(--tr-muted-grey);
     margin-inline-start: -0.75rem;
     padding-inline-start: 0.75rem;
+    margin-block-start: 0.25rem;
+    padding-block-start: 0.25rem;
+
+    @include mixins.font-note;
+    @include mixins.text-secondary;
+    @include mixins.text-sm;
+    @include mixins.font-light;
+    @include mixins.leading-tighter;
+    @include mixins.fmb-4;
 
     @media (max-width: 450px) {
       @include mixins.text-xs;