diff --git a/src/components/Principles.tsx b/src/components/Principles.tsx
index 4be1ae1..70bb3ea 100644
--- a/src/components/Principles.tsx
+++ b/src/components/Principles.tsx
@@ -56,11 +56,10 @@ export const Principles = ({ isNavyBg }: ThemeProps) => {
           </h2>
         </div>
 
-        {/* Principles — 5 columns */}
+        {/* Principles — responsive grid */}
         <div
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5"
           style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(5, 1fr)',
             border: `1px solid ${gridGap}`,
             borderRadius: 4,
             overflow: 'hidden',
@@ -75,8 +74,8 @@ export const Principles = ({ isNavyBg }: ThemeProps) => {
               transition={{ duration: 0.4, delay: i * 0.06 }}
               style={{
                 padding: '32px 28px 36px',
-                borderRight: i < principles.length - 1 ? `1px solid ${gridGap}` : 'none',
                 borderTop: '3px solid #e50914',
+                borderBottom: `1px solid ${gridGap}`,
               }}
             >
               <span