style: convert project sizing to scalable rem units with responsive root font scaling

src/components/EducationSection.module.css

@@ -1,8 +1,8 @@
 .educationSection {
   position: relative;
   width: 100%;
-  padding-top: 60px;
-  padding-bottom: 32px;
+  padding-top: 3.75rem;
+  padding-bottom: 2rem;
 }
 
 .card {
@@ -10,17 +10,17 @@
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  padding: 24px 32px;
+  padding: 1.5rem 2rem;
   display: flex;
   align-items: center;
-  gap: 36px;
+  gap: 2.25rem;
   transition:
     border-color var(--motion-duration-fast) ease,
     transform var(--motion-duration-default) var(--motion-ease-out);
 }
 
 .crestCol {
-  width: 264px;
+  width: 16.5rem;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -28,8 +28,8 @@
 }
 
 .crestContainer {
-  width: 264px;
-  height: 192px;
+  width: 16.5rem;
+  height: 12rem;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -48,7 +48,7 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   color: var(--text-secondary);
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
 
 .date {
@@ -58,7 +58,7 @@
   letter-spacing: var(--letter-spacing-eyebrow);
   color: var(--text-muted);
   text-transform: uppercase;
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
 }
 
 .detailsCol {
@@ -73,7 +73,7 @@
   line-height: var(--line-height-h3);
   font-weight: 700;
   color: var(--text-primary);
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 }
 
 .description {
@@ -100,16 +100,16 @@
 
   .crestCol,
   .crestContainer {
-    width: 180px;
-    height: 132px;
+    width: 11.25rem;
+    height: 8.25rem;
   }
 }
 
 @media (max-width: 480px) {
   .crestCol,
   .crestContainer {
-    width: 144px;
-    height: 108px;
+    width: 9rem;
+    height: 6.75rem;
   }
 }