Finished.

FrontendMentor/four-card-feature-section/css/style.css

@@ -45,15 +45,17 @@ body {
     width: 83.5%;
     /* height: 100vh; */
     margin: 0 auto;
+    max-width: 400px;
 }
 
 .topSection {
-    margin-top: 3.8rem;
+    /* think this change was brought about by browser differences. Was previously 3.8 */
+    margin-top: 3.65rem;
     text-align: center;
 }
 
 .topSection h1 {
-    font-size: 1.2rem;
+    font-size: calc(24px + (35 - 24) * ((100vw - 375px) / (1440 - 375)));
 }
 
 .topSection .title1 {
@@ -126,3 +128,59 @@ body {
 }
 /* .attribution {
 } */
+
+/* arbitrary figure atm */
+/* @media screen and (min-width: 600px) {
+    .flexContainer {
+        width: 78%;
+    }
+} */
+
+@media screen and (min-width: 1000px) {
+
+    .flexContainer {
+        max-width: 1440px;
+    }
+
+    .topSection {
+        margin-top: 3.45rem;
+    }
+
+    .topSection .blurb {
+        width: 45%;
+        margin-left: auto;
+        margin-right: auto;
+        font-size: 15px;
+    }
+    
+    .flexContainer {
+        width: 78%;
+    }
+    .middleSection {
+        margin-top: 3.3rem;
+        display: flex;
+    }
+
+    .card {
+        margin-top: 0;
+        padding: 27px 30px 36px 25px;
+    }
+
+    .card-blurb {
+        margin-top: 0.5rem;
+    }
+    .card-image {
+        margin-top: 2rem;
+    }
+    
+    .column {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        max-width: calc((100% /3) - 1.5rem);
+    }
+
+    .karma {
+        margin-top: 1.3rem;
+    }
+}

FrontendMentor/four-card-feature-section/index.html

@@ -27,7 +27,7 @@
       </div>
   
       <div class="middleSection">
-        <div class="column1">
+        <div class="column">
           <div class="supervisor card">
             <h1 class="card-title">
               Supervisor
@@ -39,7 +39,7 @@
           </div>
         </div>
         
-        <div class="column2">
+        <div class="column">
           <div class="teamBuilder card">
             <h1 class="card-title">
               Team Builder
@@ -59,7 +59,7 @@
             <img class="card-image" src="images/icon-karma.svg" alt="Karma icon">
           </div>
         </div>
-        <div class="column3">
+        <div class="column">
           <div class="calculator card">
             <h1 class="card-title">
               Calculator

FrontendMentor/four-card-feature-section/notes/process.md

@@ -57,3 +57,22 @@ So how to judge what the shadow should be? what is the trick to that? Basically
 ![mobile final side by side](mobile-final-diff.png)
 ![mobile final diff'd](mobile-final-side-by-side.png)
 
+14 minute break ...
+
+Have to work out how close the desktop is, once I put in columns. Right now, its not close :)
+
+Forgot to note when I restarted work. Around 40 minutes ago. Didn't require too much tweaking to get in nearly in place.
+Not going to spend too long trying to finese it.
+
+
+![desktop final side by side](desktop-final-slider.png)
+![desktop final diff'd](desktop-final-diff.png)
+
+And these are the final images.
+
+![Mobile Final](mobile-final.png)
+![Desktop Final](desktop-final.png)
+
+As per usual the in between state is not ideal, at the transition point the boxes are too big. It was wrong to use a % on the icon images. They become too big before the transition to the desktop form.
+
+May have run into a browser difference. Previously I had thinks lined up in the mobile section, but when I was in a different browser, I had to nudge the top section up 3 pixels.