From f1dbfbfdacd5d9880a99e755087f7c18beeca479 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 25 Aug 2025 19:17:41 -0600
Subject: [PATCH] Quote Block lg breakpoint

---
 app/components/QuoteBlock.js | 16 ++++++++--------
 app/components/QuoteDecor.js |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/components/QuoteBlock.js b/app/components/QuoteBlock.js
index 04c57dd..5ec7549 100644
--- a/app/components/QuoteBlock.js
+++ b/app/components/QuoteBlock.js
@@ -7,10 +7,10 @@ import QuoteDecor from "./QuoteDecor";
 const QuoteBlock = ({ className = "" }) => {
   return (
     <div
-      className={`md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] ${className}`}
+      className={`md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-016)] lg:p-[var(--spacing-scale-064)] ${className}`}
     >
       <div
-        className={`py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
+        className={`py-[var(--spacing-scale-064)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-064)] md:px-[var(--spacing-scale-048)] md:rounded-[var(--radius-measures-radius-medium)] lg:py-[var(--spacing-scale-064)] lg:pl-[120px] lg:pr-[320px] bg-[var(--color-surface-default-brand-darker-accent)] relative overflow-hidden`}
       >
         {/* DECORATIONS (behind content) */}
         <QuoteDecor
@@ -19,17 +19,17 @@ const QuoteBlock = ({ className = "" }) => {
                       w-full h-full"
         />
 
-        <div className="flex flex-col gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] relative z-10">
-          <div className="flex flex-col gap-[var(--spacing-scale-020)]">
+        <div className="flex flex-col gap-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-048)] lg:gap-[var(--spacing-scale-064)] relative z-10">
+          <div className="flex flex-col gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-018)]">
             <Image
               src="assets/Quote_Avatar.svg"
               alt="Quote Avatar"
               width={64}
               height={64}
-              className="filter sepia md:w-[120px] md:h-[120px]"
+              className="filter sepia md:w-[120px] md:h-[120px] lg:w-[150px] lg:h-[150px]"
             />
             <blockquote>
-              <p className="font-bricolage-grotesque font-normal text-[18px] leading-[120%] tracking-[0px] md:text-[36px] md:leading-[110%] md:tracking-[0px] text-[var(--color-content-inverse-primary)] -indent-[0.5em] [&>span]:font-bricolage-grotesque">
+              <p className="font-bricolage-grotesque font-normal text-[18px] leading-[120%] tracking-[0px] md:text-[36px] md:leading-[110%] md:tracking-[0px] md:text-[52px] text-[var(--color-content-inverse-primary)] -indent-[0.5em] [&>span]:font-bricolage-grotesque">
                 <span>"</span>The rules of decision-making must be open and
                 available to everyone, and this can happen only if they are
                 formalized.<span>"</span>
@@ -37,10 +37,10 @@ const QuoteBlock = ({ className = "" }) => {
             </blockquote>
           </div>
           <div className="flex flex-col gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-012)]">
-            <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] text-[var(--color-content-inverse-primary)] uppercase">
+            <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] text-[var(--color-content-inverse-primary)] uppercase">
               Jo Freeman
             </p>
-            <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] text-[var(--color-content-inverse-primary)] uppercase -indent-[0.5em] [&>span]:font-inter">
+            <p className="font-inter font-normal text-[12px] leading-[120%] tracking-[0.24px] md:text-[18px] md:leading-[120%] md:tracking-[0.24px] lg:text-[24px] text-[var(--color-content-inverse-primary)] uppercase -indent-[0.5em] [&>span]:font-inter">
               <span>"</span>The Tyranny of Structurelessness<span>"</span>
             </p>
           </div>
diff --git a/app/components/QuoteDecor.js b/app/components/QuoteDecor.js
index e1b8ccb..04cec01 100644
--- a/app/components/QuoteDecor.js
+++ b/app/components/QuoteDecor.js
@@ -3,7 +3,7 @@
 const QuoteDecor = ({ className = "" }) => {
   return (
     <svg
-      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 w-full h-full md:max-w-[640px] lg:max-w-[1440px] ${className}`}
+      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 w-full h-full md:max-w-[640px] lg:max-w-[850px] xl:max-w-[850px] ${className}`}
       viewBox="400 0 442 163"
       aria-hidden="true"
       overflow="visible"