feat(page): improve featured image ratio on small screens

layouts/partials/css/academic.css

@@ -798,6 +798,32 @@ article {
   height: auto;
 }
 
+.featured-image {
+  width: 100%;
+  background-position: left;
+  background-origin: border-box;
+  background-size: cover;
+  height: 60vh;
+  min-height: 500px;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto
+}
+
+@media screen and (max-width: 1199px) {
+  .featured-image {
+    min-height: 400px;
+    height: auto;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .featured-image {
+    min-height: 300px;
+  }
+}
+
 .article-header-caption {
   position: absolute;
   bottom: 0;

layouts/partials/page_header.html

@@ -30,9 +30,9 @@
 
 {{/* Featured image */}}
 {{ if and $featured (not .Params.image.preview_only) }}
-{{ $image := $featured.Fill (printf "1600x400 q90 %s" $anchor) }}
+{{ $image := $featured.Resize "800x" }}
 <div class="article-header d-xl-none">
-  <img src="{{ $image.RelPermalink }}" class="article-banner" itemprop="image" alt="">
+  <div class="featured-image" style="background-image: url('{{ $image.RelPermalink }}');"></div>
   {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
 </div>