Footer is correctly fixed to the viewport

Author: Dan2Clouted

Wireframe/style.css

@@ -5,6 +5,7 @@
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
   --container: 1280px;
+  --footer-height: 60px;
 }
 
 html,
@@ -21,19 +22,13 @@ body {
     system-ui,
     -apple-system,
     BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
     sans-serif;
   line-height: normal;
 
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 a {
@@ -49,9 +44,8 @@ svg {
 }
 
 article img {
-  height: 240px;
-  object-fit: cover;
-  display: block;
+  height: 20vh;
+  max-height: 180px;
 }
 
 header {
@@ -62,25 +56,28 @@ header {
 }
 
 main {
+  flex: 1;
   max-width: var(--container);
   margin: 0 auto;
-  padding-bottom: calc(var(--space) * 4);
-
-  flex: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
+  overflow: hidden;
+  padding-bottom: 60px;
 }
 
 main > *:first-child {
   grid-column: span 2;
 }
 
 footer {
-  border-top: var(--line);
+  border-top: none; /* or keep if you want */
   padding: var(--space);
   text-align: center;
   width: 100%;
+  margin-top: auto;
+  background: var(--paper);
+  border-top: 1px solid black;
 }
 
 article {