Fix wrong aspect ratio in pages

Pages have no columns, so we had to account for that.

assets/css/screen.css

@@ -701,7 +701,6 @@ instead of pages ".mind-page*".
 img.mind-post_feature-image {
     width: 100%;
     object-fit: cover;
-    max-height: 360px; /* 21:9 aspect ratio */
     /*
     TODO: see .mind-post_content-header.
 
@@ -710,6 +709,35 @@ img.mind-post_feature-image {
     */
 }
 
+.mind-post_main img.mind-post_feature-image {
+    /* 21:9 aspect ratio
+        the image is 840 pixels wide, because
+        the whole page content is 1260 pixels wide.
+        the two sidebars are 210 pixels each, so
+        the image is 840 pixels wide.
+
+        the image has to be 360 pixels high to have an accurate 21:9 aspect ratio.
+
+        THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
+    */
+    max-height: 360px;
+}
+
+
+.mind-page_main img.mind-post_feature-image {
+    /* 21:9 aspect ratio
+        the whole page content is 1260 pixels wide.
+        there are no sidebars.
+
+        so, the image is 1260px wide too.
+
+        the image has to be 540 pixels high to have an accurate 21:9 aspect ratio.
+
+        THIS ONLY APPLIES TO POSTS, since pages have no sidebars.
+    */
+    max-height: 540px;
+}
+
 .mind-post_content code {
     font-family: monospace;
     background-color: rgb(20, 20, 20);
@@ -1213,8 +1241,44 @@ Media queries are used to make the website responsive and cool on mobile.
         font-size: 17px;
     }
 
-    img.mind-post_feature-image {
+    .mind-post_main img.mind-post_feature-image {
-        max-height: 29vw; /* 21:9 aspect ratio */
+        /* 21:9 aspect ratio
+
+            the whole body is 100% wide.
+            the "content" (so excluding the sidebars) is about 67% large.
+            the image is also 67% large, since it takes 100% of the content width.
+
+            67 stands for 21,
+            x stands for 9.
+
+            x = 29% of the view width.
+            to be a perfect 21:9 ratio, the image has to be 29vw high.
+
+            THIS ONLY APPLIES TO POSTS, since pages do not have sidebars.
+
+        */
+        max-height: 29vw;
+    }
+
+    .mind-page_main img.mind-post_feature-image {
+        /* 21:9 aspect ratio
+
+            the whole body is 100% wide.
+            there are no sidebars.
+
+            the image has to be 21:9, so:
+
+            100 stands for 21
+            x stands for 9
+
+            x = 42.8%.
+
+            the image has to be 42.8% wide to be 21:9.
+
+            THIS ONLY APPLIES TO PAGES, since posts have sidebars.
+
+        */
+        max-height: 42.857vw;
     }
 
     .kg-gallery-image {
@@ -1293,8 +1357,23 @@ Media queries are used to make the website responsive and cool on mobile.
         padding: 0 20px;
     }
 
-    img.mind-post_feature-image {
+    .mind-post_main img.mind-post_feature-image {
-        max-height: 42.857vw; /* 21:9 aspect ratio */
+        /* 21:9 aspect ratio
+
+        the body is 100% large.
+        there are no sidebars.
+
+        the image has to be 21:9, so:
+
+        100 stands for 21
+        x stands for 9
+
+        x = 42.8%.
+
+        the image has to be 42.8% wide to be 21:9.
+
+        */
+        max-height: 42.857vw;
     }
 
     .kg-gallery-image {

page.hbs

@@ -13,22 +13,24 @@
         <div class="mind-post_central-column">
         {{#post}}
             <div class="mind-post_content"> {{!-- Keeping this div to have the same structure as the post.hbs, even though not necessary --}}
-                <div class="mind-post_content-header">
+                <div class="mind-page_main">
+                    <div class="mind-post_content-header">
 
-                {{#if feature_image}}
+                    {{#if feature_image}}
-                    <img class="mind-post_feature-image" alt="{{title}}"
+                        <img class="mind-post_feature-image" alt="{{title}}"
-                        srcset="
+                            srcset="
-                            {{img_url feature_image size="s"}} 300w,
+                                {{img_url feature_image size="s"}} 300w,
-                            {{img_url feature_image size="m"}} 600w,
+                                {{img_url feature_image size="m"}} 600w,
-                            {{img_url feature_image size="l"}} 1200w,
+                                {{img_url feature_image size="l"}} 1200w,
-                            {{img_url feature_image size="xl"}} 1600w,
+                                {{img_url feature_image size="xl"}} 1600w,
-                            {{img_url feature_image size="xxl"}} 2000w"
+                                {{img_url feature_image size="xxl"}} 2000w"
-                        src="{{img_url feature_image size="l"}}"
+                            src="{{img_url feature_image size="l"}}"
-                    />
+                        />
 
-                {{/if}}
+                    {{/if}}
+                    </div>
+                    {{content}}
                 </div>
-                {{content}}
             </div>
         {{/post}}
         </div>