diff --git a/marketing/public/images/compliance/forest.jpg b/marketing/public/images/compliance/forest.jpg
new file mode 100644
index 000000000..63e3eed60
Binary files /dev/null and b/marketing/public/images/compliance/forest.jpg differ
diff --git a/marketing/public/images/compliance/forest.png b/marketing/public/images/compliance/forest.png
deleted file mode 100644
index db2563588..000000000
Binary files a/marketing/public/images/compliance/forest.png and /dev/null differ
diff --git a/marketing/public/images/compliance/hero_1.jpg b/marketing/public/images/compliance/hero_1.jpg
index c3463cca5..bc3292ddf 100644
Binary files a/marketing/public/images/compliance/hero_1.jpg and b/marketing/public/images/compliance/hero_1.jpg differ
diff --git a/marketing/public/videos/LG_EUDR_V3.mp4 b/marketing/public/videos/LG_EUDR_V3.mp4
deleted file mode 100644
index 6e1ecac5c..000000000
Binary files a/marketing/public/videos/LG_EUDR_V3.mp4 and /dev/null differ
diff --git a/marketing/src/containers/compliance/component.tsx b/marketing/src/containers/compliance/component.tsx
index d15820a46..51776532c 100644
--- a/marketing/src/containers/compliance/component.tsx
+++ b/marketing/src/containers/compliance/component.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 
 import Hero from 'containers/compliance/hero';
-import Video from 'containers/compliance/video';
 import ContactUs from 'containers/compliance/contact-us';
 import EUDRTool from 'containers/compliance/eudr-tool';
 
@@ -33,7 +32,6 @@ const Compliance: React.FC = () => {
   return (
     <>
       <Hero />
-      <Video />
       <EUDRCompliance />
       <EUDRTool />
       <ContactUs />
diff --git a/marketing/src/containers/compliance/eudr-compliance/component.tsx b/marketing/src/containers/compliance/eudr-compliance/component.tsx
index 564cd7db9..6f6ca5fa8 100644
--- a/marketing/src/containers/compliance/eudr-compliance/component.tsx
+++ b/marketing/src/containers/compliance/eudr-compliance/component.tsx
@@ -56,6 +56,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="ESA"
                             width={160}
                             height={58.07}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -72,6 +73,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="Wageningen University & Reseacrh"
                             width={228}
                             height={80}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -88,6 +90,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="GFW"
                             width={120}
                             height={122}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -104,6 +107,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="FAO"
                             width={120}
                             height={122.5}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -121,6 +125,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="World Conservation Monitoring Centre"
                             width={120}
                             height={122.5}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -133,6 +138,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="GLAD | Global Land Analysis & Discovery"
                             width={214}
                             height={49}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -149,6 +155,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="Forest data Partnership"
                             width={175}
                             height={49}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -165,6 +172,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="Forest data Partnership"
                             width={151}
                             height={68}
+                            draggable={false}
                           />
                         </a>
                       </li>
diff --git a/marketing/src/containers/compliance/eudr-tool/component.tsx b/marketing/src/containers/compliance/eudr-tool/component.tsx
index d77edb891..1717b0501 100644
--- a/marketing/src/containers/compliance/eudr-tool/component.tsx
+++ b/marketing/src/containers/compliance/eudr-tool/component.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Wrapper from 'containers/wrapper';
 import FadeIn from 'components/fade';
 
-import { EUDRToolFeatures1, EUDRToolFeatures2 } from './constants';
+import { EUDRToolFeatures } from './constants';
 
 const Card = ({ index, title, description }) => (
   <div className="space-y-2">
@@ -28,7 +28,7 @@ const EUDRTool: React.FC = () => {
 
           <FadeIn>
             <div className="md:grid md:grid-cols-3 w-full md:gap-x-14 flex flex-col space-y-14 md:space-y-0">
-              {EUDRToolFeatures1.map((feature) => (
+              {EUDRToolFeatures[0].map((feature) => (
                 <Card key={feature.title} {...feature} />
               ))}
             </div>
@@ -36,20 +36,22 @@ const EUDRTool: React.FC = () => {
 
           <FadeIn>
             <div className="w-full space-y-4 md:py-16">
-              <div className="relative max-w-3xl">
+              <div className="relative lg:max-w-3xl md:max-w-2xl max-w-sm">
                 <Image
                   width={728}
                   height={410}
                   layout="responsive"
                   src="/images/compliance/eudr_tool.png"
                   alt="EUDR Tool"
+                  draggable={false}
                 />
-                <div className="md:absolute md:top-0 md:right-0 md:transform md:translate-x-1/2 md:translate-y-1/2">
+                <div className="absolute md:top-0 lg:right-0 md:right-20 right-28 -top-3  transform translate-x-1/2 translate-y-1/2">
                   <Image
                     width={443}
                     height={221}
                     src="/images/compliance/eudr_tool_country.png"
                     alt="EUDR Tool Countries view"
+                    draggable={false}
                   />
                 </div>
               </div>
@@ -58,7 +60,7 @@ const EUDRTool: React.FC = () => {
 
           <FadeIn>
             <div className="md:grid md:grid-cols-3 w-full md:gap-x-14 flex flex-col space-y-14 md:space-y-0">
-              {EUDRToolFeatures2.map((feature) => (
+              {EUDRToolFeatures[1].map((feature) => (
                 <Card key={feature.title} {...feature} />
               ))}
             </div>
diff --git a/marketing/src/containers/compliance/eudr-tool/constants.ts b/marketing/src/containers/compliance/eudr-tool/constants.ts
index f2581b9cf..dd435a2b3 100644
--- a/marketing/src/containers/compliance/eudr-tool/constants.ts
+++ b/marketing/src/containers/compliance/eudr-tool/constants.ts
@@ -1,41 +1,42 @@
-export const EUDRToolFeatures1 = [
-  {
-    index: '01',
-    title: 'Achieve EUDR Alignment and Beyond',
-    description:
-      'Align with new standards and requirements (ESRS, TNFD, SBTN). Produce transparent, repeatable, and auditable analysis.',
-  },
-  {
-    index: '02',
-    title: 'Produce Transparent, Repeatable, and Auditable Analyses',
-    description:
-      'Our tool ensures your analyses are transparent, repeatable, and audit-ready, instilling confidence in your sustainability reporting.',
-  },
-  {
-    index: '03',
-    title: 'Visualize and Analyze Risk Exposure',
-    description:
-      'Identify and understand risk exposure by commodity, volume, supplier, and region through intuitive visualizations and in-depth analysis.',
-  },
-];
-
-export const EUDRToolFeatures2 = [
-  {
-    index: '04',
-    title: 'Comprehensively Manage Scope 3 Supply Chain',
-    description:
-      'Our tool covers a wide range of commodities including cattle, cocoa, coffee, palm oil, rubber, soy, wood, and more, enabling comprehensive management of your scope 3 supply chain.',
-  },
-  {
-    index: '05',
-    title: 'Seamless Integration with Existing Data Systems',
-    description:
-      'Easily integrate our tool with your existing data systems, streamlining your sustainability efforts without disruption.',
-  },
-  {
-    index: '06',
-    title: 'Leverage Latest Scientific Data',
-    description:
-      'Make informed decisions backed by the latest scientific data, ensuring your sustainability strategies are grounded in sound knowledge and expertise.',
-  },
+export const EUDRToolFeatures = [
+  [
+    {
+      index: '01',
+      title: 'Achieve EUDR Alignment and Beyond',
+      description:
+        'Align with new standards and requirements (ESRS, TNFD, SBTN). Produce transparent, repeatable, and auditable analysis.',
+    },
+    {
+      index: '02',
+      title: 'Produce Transparent, Repeatable, and Auditable Analyses',
+      description:
+        'Our tool ensures your analyses are transparent, repeatable, and audit-ready, instilling confidence in your sustainability reporting.',
+    },
+    {
+      index: '03',
+      title: 'Visualize and Analyze Risk Exposure',
+      description:
+        'Identify and understand risk exposure by commodity, volume, supplier, and region through intuitive visualizations and in-depth analysis.',
+    },
+  ],
+  [
+    {
+      index: '04',
+      title: 'Comprehensively Manage Scope 3 Supply Chain',
+      description:
+        'Our tool covers a wide range of commodities including cattle, cocoa, coffee, palm oil, rubber, soy, wood, and more, enabling comprehensive management of your scope 3 supply chain.',
+    },
+    {
+      index: '05',
+      title: 'Seamless Integration with Existing Data Systems',
+      description:
+        'Easily integrate our tool with your existing data systems, streamlining your sustainability efforts without disruption.',
+    },
+    {
+      index: '06',
+      title: 'Leverage Latest Scientific Data',
+      description:
+        'Make informed decisions backed by the latest scientific data, ensuring your sustainability strategies are grounded in sound knowledge and expertise.',
+    },
+  ],
 ];
diff --git a/marketing/src/containers/compliance/hero/component.tsx b/marketing/src/containers/compliance/hero/component.tsx
index 25fac1058..b6fc7c734 100644
--- a/marketing/src/containers/compliance/hero/component.tsx
+++ b/marketing/src/containers/compliance/hero/component.tsx
@@ -1,33 +1,30 @@
-import { PauseIcon, PlayIcon } from '@heroicons/react/solid';
+import { FC } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
+import { useInView } from 'react-intersection-observer';
 import Wrapper from 'containers/wrapper';
-
+import { Media } from 'components/media-query';
+import Image from 'next/image';
+import YouTube from 'react-youtube';
 import { motion } from 'framer-motion';
-import { useCallback, useEffect, useRef, useState } from 'react';
 
-const Hero: React.FC = () => {
+const Video: FC = () => {
   const videoRef = useRef<HTMLVideoElement>();
-  const [playing, setPlaying] = useState(false);
-
-  const onTogglePlay = useCallback(() => {
-    if (videoRef.current) {
-      if (!playing) videoRef.current.play();
-      if (playing) videoRef.current.pause();
-
-      setPlaying(!playing);
-    }
-  }, [playing]);
+  const { ref, inView } = useInView();
 
   const onVideoEnded = useCallback(() => {
-    setPlaying(false);
     videoRef.current.pause();
     videoRef.current.currentTime = 0;
   }, []);
 
   useEffect(() => {
+    if (videoRef.current && !inView) {
+      videoRef.current.pause();
+    }
+
     if (videoRef.current) {
       videoRef.current.addEventListener('ended', onVideoEnded);
     }
-  }, [onVideoEnded]);
+  }, [inView, onVideoEnded]);
 
   return (
     <section className="relative z-10 bg-white">
@@ -44,41 +41,30 @@ const Hero: React.FC = () => {
             </h1>
           </div>
         </motion.div>
-
-        <motion.div
-          className="relative hidden aspect-video"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.75, delay: 0.1 }}
-        >
-          <header className="absolute z-10 flex items-center space-x-5 text-white top-6 left-6">
-            <button
-              className="flex items-center justify-center w-20 h-20 bg-white cursor-pointer"
-              onClick={onTogglePlay}
-            >
-              {!playing && <PlayIcon className="w-5 h-5 text-black" />}
-              {playing && <PauseIcon className="w-5 h-5 text-black" />}
-            </button>
-
-            <h4 className="text-sm font-black uppercase font-display">Watch demo</h4>
-          </header>
-          <motion.iframe
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.75, delay: 0.1 }}
-            width="853"
-            height="480"
-            src="https://www.youtube.com/embed/RIJ1lX57TtI"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            title="Landgriffon: Sustainable Supply Chain Solutions"
-            className="w-full h-[190px] md:h-[438px] lg:h-[603px]"
-          />
-        </motion.div>
       </Wrapper>
+      <div className="relative z-20">
+        <Wrapper>
+          <section ref={ref} className="relative max-h-screen bg-white">
+            <YouTube
+              videoId="Bzvdwt-EuNM"
+              title="Landgriffon: Sustainable Supply Chain Solutions"
+              className="w-full h-[320px] md:h-[418px] lg:h-[583px]"
+              iframeClassName="w-full h-[320px] md:h-[418px] lg:h-[583px]"
+            />
+          </section>
+        </Wrapper>
+      </div>
+      <div className="flex flex-col justify-end overflow-hidden relative z-10  md:-mt-80 -mt-72 h-80 md:h-[420px] lg:h-[696px]">
+        <Image
+          alt="field"
+          src="/images/compliance/hero_1.jpg"
+          layout="fill"
+          objectPosition="top"
+          className="object-cover"
+          draggable={false}
+        />
+      </div>
     </section>
   );
 };
-
-export default Hero;
+export default Video;
diff --git a/marketing/src/containers/compliance/hero/index.ts b/marketing/src/containers/compliance/hero/index.ts
deleted file mode 100644
index b404d7fd4..000000000
--- a/marketing/src/containers/compliance/hero/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './component';
diff --git a/marketing/src/containers/compliance/video/index.tsx b/marketing/src/containers/compliance/hero/index.tsx
similarity index 100%
rename from marketing/src/containers/compliance/video/index.tsx
rename to marketing/src/containers/compliance/hero/index.tsx
diff --git a/marketing/src/containers/compliance/impact-beyond-compliance/component.tsx b/marketing/src/containers/compliance/impact-beyond-compliance/component.tsx
index eee958de8..f85679a4d 100644
--- a/marketing/src/containers/compliance/impact-beyond-compliance/component.tsx
+++ b/marketing/src/containers/compliance/impact-beyond-compliance/component.tsx
@@ -46,6 +46,7 @@ const ImpactBeyondCompliance: React.FC = () => {
             alt="Waves"
             layout="fill"
             className="absolute left-0 bottom-0 top-0"
+            draggable={false}
           />
         </div>
       </div>
diff --git a/marketing/src/containers/compliance/science-based-targets/component.tsx b/marketing/src/containers/compliance/science-based-targets/component.tsx
index 2bf7026af..060a29803 100644
--- a/marketing/src/containers/compliance/science-based-targets/component.tsx
+++ b/marketing/src/containers/compliance/science-based-targets/component.tsx
@@ -3,41 +3,7 @@ import FadeIn from 'components/fade';
 import Link from 'next/link';
 import Icon from 'components/icon';
 import Image from 'next/image';
-
-import NATURE_SVG from 'svgs/compliance/nature.svg?sprite';
-import GLOBE_SVG from 'svgs/compliance/globe.svg?sprite';
-import GOALS_SVG from 'svgs/compliance/goals.svg?sprite';
-import DOCUMENTS_SVG from 'svgs/compliance/documents.svg?sprite';
-import CHART_SVG from 'svgs/compliance/chart.svg?sprite';
-
-const constants = [
-  {
-    icon: NATURE_SVG,
-    title: 'Assess Impact on Nature: ',
-    text: 'Use LandGriffon’s methodology to appraise nature impacts against SBTN-aligned indicators.',
-  },
-  {
-    icon: GLOBE_SVG,
-    title: 'Prioritize High-Risk Areas: ',
-    text: 'Allocate resources based on environmental materiality screening.',
-  },
-  {
-    icon: GOALS_SVG,
-    title: 'Set Impactful Science-Based Targets: ',
-    text: 'Establish specific targets across freshwater, land, climate, and biodiversity.',
-  },
-  {
-    icon: DOCUMENTS_SVG,
-    title: 'Make Informed Interventions: ',
-    text: "Follow SBTN's Action Framework (AR3T) for positive impact.",
-  },
-  {
-    icon: CHART_SVG,
-    title: 'Track Progress:',
-    text: 'Report publicly on progress using LandGriffon’s streamlined reporting tools.',
-  },
-];
-
+import { TARGETS } from './constants';
 const ScienceBasedTargets: React.FC = () => {
   return (
     <section className="relative space-y-12 bg-blue-600 md:py-8 overflow-hidden">
@@ -71,7 +37,7 @@ const ScienceBasedTargets: React.FC = () => {
 
             <FadeIn>
               <ul className="flex flex-col space-y-5">
-                {constants.map(({ title, icon, text }) => (
+                {TARGETS.map(({ title, icon, text }) => (
                   <li key={title} className="space-x-4 flex items-start">
                     <span className="rounded-full bg-orange-500 p-2">
                       <Icon icon={icon} className="w-5 h-5 shrink-0" />
@@ -90,11 +56,12 @@ const ScienceBasedTargets: React.FC = () => {
       <FadeIn>
         <div className="w-screen min-h-[459px] h-auto relative aspect-auto">
           <Image
-            src="/images/compliance/forest.png"
+            src="/images/compliance/forest.jpg"
             alt="Forest"
             layout="fill"
             objectFit="cover"
             objectPosition="top"
+            draggable={false}
           />
         </div>
       </FadeIn>
diff --git a/marketing/src/containers/compliance/science-based-targets/constants.ts b/marketing/src/containers/compliance/science-based-targets/constants.ts
new file mode 100644
index 000000000..7ae788846
--- /dev/null
+++ b/marketing/src/containers/compliance/science-based-targets/constants.ts
@@ -0,0 +1,33 @@
+import NATURE_SVG from 'svgs/compliance/nature.svg?sprite';
+import GLOBE_SVG from 'svgs/compliance/globe.svg?sprite';
+import GOALS_SVG from 'svgs/compliance/goals.svg?sprite';
+import DOCUMENTS_SVG from 'svgs/compliance/documents.svg?sprite';
+import CHART_SVG from 'svgs/compliance/chart.svg?sprite';
+
+export const TARGETS = [
+  {
+    icon: NATURE_SVG,
+    title: 'Assess Impact on Nature: ',
+    text: 'Use LandGriffon’s methodology to appraise nature impacts against SBTN-aligned indicators.',
+  },
+  {
+    icon: GLOBE_SVG,
+    title: 'Prioritize High-Risk Areas: ',
+    text: 'Allocate resources based on environmental materiality screening.',
+  },
+  {
+    icon: GOALS_SVG,
+    title: 'Set Impactful Science-Based Targets: ',
+    text: 'Establish specific targets across freshwater, land, climate, and biodiversity.',
+  },
+  {
+    icon: DOCUMENTS_SVG,
+    title: 'Make Informed Interventions: ',
+    text: "Follow SBTN's Action Framework (AR3T) for positive impact.",
+  },
+  {
+    icon: CHART_SVG,
+    title: 'Track Progress:',
+    text: 'Report publicly on progress using LandGriffon’s streamlined reporting tools.',
+  },
+];
diff --git a/marketing/src/containers/compliance/video/component.tsx b/marketing/src/containers/compliance/video/component.tsx
deleted file mode 100644
index 59354264a..000000000
--- a/marketing/src/containers/compliance/video/component.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { FC } from 'react';
-import { useEffect, useRef, useCallback, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-import Wrapper from 'containers/wrapper';
-import { Media } from 'components/media-query';
-import Image from 'next/image';
-import { PlayIcon, PauseIcon } from '@heroicons/react/solid';
-
-const Video: FC = () => {
-  const videoRef = useRef<HTMLVideoElement>();
-  const { ref, inView } = useInView();
-  const [playing, setPlaying] = useState(false);
-
-  const onTogglePlay = useCallback(() => {
-    if (videoRef.current) {
-      if (!playing) videoRef.current.play();
-      if (playing) videoRef.current.pause();
-
-      setPlaying(!playing);
-    }
-  }, [playing]);
-
-  const onVideoEnded = useCallback(() => {
-    setPlaying(false);
-    videoRef.current.pause();
-    videoRef.current.currentTime = 0;
-  }, []);
-
-  useEffect(() => {
-    if (videoRef.current && !inView) {
-      videoRef.current.pause();
-    }
-
-    if (videoRef.current) {
-      videoRef.current.addEventListener('ended', onVideoEnded);
-    }
-  }, [inView, onVideoEnded]);
-
-  return (
-    <section className="bg-white">
-      <div className="relative z-20">
-        <Wrapper>
-          <section ref={ref} className="relative max-h-screen bg-white">
-            <Media lessThan="md">
-              <Image
-                layout="responsive"
-                src="/images/compliance/video_image.jpg"
-                alt="EUDR tool"
-                width={375}
-                height={211}
-              />
-            </Media>
-            <Media greaterThanOrEqual="md">
-              <div className="relative w-full min-h-full space-y-12 mx-auto pt-12">
-                <header className="absolute z-10 flex items-center space-x-5 text-white -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
-                  <button
-                    className="flex items-center justify-center w-20 h-20 bg-black cursor-pointer"
-                    onClick={onTogglePlay}
-                  >
-                    {!playing && <PlayIcon className="w-5 h-5 text-white" />}
-                    {playing && <PauseIcon className="w-5 h-5 text-white" />}
-                  </button>
-                </header>
-                <video
-                  ref={videoRef}
-                  src="/videos/LG_EUDR_V3.mp4"
-                  className="w-full h-full aspect-auto"
-                />
-              </div>
-            </Media>
-          </section>
-        </Wrapper>
-      </div>
-      <Media greaterThanOrEqual="md">
-        <div className="flex flex-col justify-end overflow-hidden relative z-10 -mt-96 h-[696px]">
-          <Image
-            alt="field"
-            src="/images/compliance/hero_1.jpg"
-            layout="fill"
-            objectFit="fill"
-            objectPosition="top"
-          />
-        </div>
-      </Media>
-    </section>
-  );
-};
-export default Video;
diff --git a/marketing/src/pages/compliance.tsx b/marketing/src/pages/compliance.tsx
index 7ae312a34..f05b24c7c 100644
--- a/marketing/src/pages/compliance.tsx
+++ b/marketing/src/pages/compliance.tsx
@@ -30,7 +30,7 @@ const CompliancePage: NextPage<PageProps> = () => {
           />
           <meta name="og:type" content="website" />
           <meta name="og:url" content="https://landgriffon.com/methodology" />
-          <meta name="og:image" content="https://landgriffon.com/images/og/OG-Methodology.png" />
+          <meta name="og:image" content="https://landgriffon.com/images/og/OG-LandGriffon.png" />
         </Head>
 
         <Compliance />
diff --git a/marketing/src/styles/globals.css b/marketing/src/styles/globals.css
index 4079f765c..02dea475c 100644
--- a/marketing/src/styles/globals.css
+++ b/marketing/src/styles/globals.css
@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 @-webkit-keyframes autofill {
-  0%,100% {
+  0%,
+  100% {
     color: #666;
     background: transparent;
   }
@@ -37,10 +38,10 @@
 
   input:-webkit-autofill,
   input:-webkit-autofill:focus {
-      transition: background-color 0s 60000s, color 0s 60000s;
+    transition: background-color 0s 60000s, color 0s 60000s;
   }
   input[data-autocompleted] {
-      background-color: transparent !important;
+    background-color: transparent !important;
   }
 }
 
@@ -62,13 +63,13 @@
 
 /* Overriding styles */
 @layer components {
-  div[data-testid="blog-card-item"] p > em {
+  div[data-testid='blog-card-item'] p > em {
     @apply not-italic;
   }
-  div[data-testid="blog-card-item"] p > strong {
+  div[data-testid='blog-card-item'] p > strong {
     @apply font-bold text-white;
   }
-  div[data-testid="blog-card-item"] p > a {
+  div[data-testid='blog-card-item'] p > a {
     @apply underline text-white;
   }
 }