diff --git a/app/globals.css b/app/globals.css index c470c92a9..c77ab8e53 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,18 +3,32 @@ @config "../tailwind.config.cjs"; -/* Fix for Tailwind v4 missing container center & padding */ -@layer components { - .container { - width: 100%; - margin-inline: auto !important; - padding-inline: 1rem; +/* Tailwind v4 Container Polyfill */ +@utility container { + width: 100%; + margin-inline: auto !important; + padding-inline: 1rem; + + @media (min-width: 640px) { + max-width: 640px; + padding-inline: 1.5rem; + } + @media (min-width: 768px) { + max-width: 768px; + padding-inline: 2rem; + } + @media (min-width: 1024px) { + max-width: 1024px; + padding-inline: 2.5rem; + } + @media (min-width: 1280px) { + max-width: 1280px; + padding-inline: 3rem; + } + @media (min-width: 1536px) { + max-width: 1536px; + padding-inline: 4rem; } - @media (width >= 640px) { .container { max-width: 640px; padding-inline: 1.5rem; } } - @media (width >= 768px) { .container { max-width: 768px; padding-inline: 2rem; } } - @media (width >= 1024px) { .container { max-width: 1024px; padding-inline: 2.5rem; } } - @media (width >= 1280px) { .container { max-width: 1280px; padding-inline: 3rem; } } - @media (width >= 1536px) { .container { max-width: 1536px; padding-inline: 4rem; } } } /* E-TIB Custom Utilities */ diff --git a/components/blocks/CompanyTimeline.tsx b/components/blocks/CompanyTimeline.tsx index ca5aa0cc5..a739d7acd 100644 --- a/components/blocks/CompanyTimeline.tsx +++ b/components/blocks/CompanyTimeline.tsx @@ -85,7 +85,7 @@ export function CompanyTimeline({
-