PUBLISH: Adjust font-size with screen size for slighlty better fonts on mobile

docs/genres/index.html

@@ -59,30 +59,6 @@
         </header>
         <div class="carasol">
           
-            <div class="card">
-  <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forNow You See Me 2" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Now You See Me 2</h3>
-    </header>
-    <div>A group of magicians are coerced into pulling off another heist</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">2/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/now-you-see-me-2/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
             <div class="card">
   <div class="card-image">
     <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
@@ -109,31 +85,7 @@
           
             <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="Poster forThe French Dispatch" />
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">The French Dispatch</h3>
-    </header>
-    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
     
   </div>
   <section class="card-content">
@@ -155,6 +107,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forNow You See Me 2" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Now You See Me 2</h3>
+    </header>
+    <div>A group of magicians are coerced into pulling off another heist</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">2/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/now-you-see-me-2/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Poster forHoles" />
@@ -233,6 +209,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="Poster forThe French Dispatch" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
         </div>
       </section>
     
@@ -243,54 +243,6 @@
         </header>
         <div class="carasol">
           
-            <div class="card">
-  <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">John Wick</h3>
-    </header>
-    <div>A man dismantles an entire criminal syndicate that stands between him and his revenge</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">5/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/john-wick/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
-            <div class="card">
-  <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjZkOTdmMWItOTkyNy00MDdjLTlhNTQtYzU3MzdhZjA0ZDEyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forO Brother, Where Art Thou?" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle card-title-long">O Brother, Where Art Thou?</h3>
-    </header>
-    <div>Three escaped convicts seek their stashed treasure in dustbowl Mississippi</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/o-brother-where-art-thou/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
             <div class="card">
   <div class="card-image">
     <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTY0NDY3MDMxN15BMl5BanBnXkFtZTcwOTM5NzMzOQ@@._V1_SX800.webp alt="Poster forNow You See Me" />
@@ -323,7 +275,31 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Poster forBeverly Hills Cop" />
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjZkOTdmMWItOTkyNy00MDdjLTlhNTQtYzU3MzdhZjA0ZDEyXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forO Brother, Where Art Thou?" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle card-title-long">O Brother, Where Art Thou?</h3>
+    </header>
+    <div>Three escaped convicts seek their stashed treasure in dustbowl Mississippi</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/o-brother-where-art-thou/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Poster forBeverly Hills Cop" />
     
   </div>
   <section class="card-content">
@@ -345,6 +321,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">John Wick</h3>
+    </header>
+    <div>A man dismantles an entire criminal syndicate that stands between him and his revenge</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">5/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/john-wick/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
         </div>
       </section>
     
@@ -355,6 +355,54 @@
         </header>
         <div class="carasol">
           
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
+    </header>
+    <div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/kingsman/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="Poster forIn Time" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">In Time</h3>
+    </header>
+    <div>A dystopian future where time is literally money</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/in-time/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forNow You See Me 2" />
@@ -381,7 +429,7 @@
           
             <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Poster forFright Night" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Poster forFright Night" />
     
       <a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
         <span hidden>Favorite</span>
@@ -409,30 +457,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle card-title-long">The School for Good and Evil</h3>
-    </header>
-    <div>Two friends embark on a fairy tale at a school for heroes and villains</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">3/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/the-school-for-good-and-evil/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2NjA1ODgzMF5BMl5BanBnXkFtZTgwMTM2MTI4MjE@._V1_SX800.webp alt="Poster forJohn Wick" />
@@ -483,45 +507,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Poster forKingsman: The Secret Service" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
+      <h3 class="subtitle card-title-long">The School for Good and Evil</h3>
     </header>
-    <div>A secret British spy agency unravels a billionaire&rsquo;s evil plot</div>
+    <div>Two friends embark on a fairy tale at a school for heroes and villains</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
-        <span class="numbers">4/5</span>
+        <span class="numbers">3/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/kingsman/">
+        <a class="button" href="/film/reviews/the-school-for-good-and-evil/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="Poster forIn Time" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">In Time</h3>
-    </header>
-    <div>A dystopian future where time is literally money</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/in-time/">
           Read review
         </a>
     </div>
@@ -629,45 +629,27 @@
           
             <div class="card">
   <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="Poster forThe French Dispatch" />
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Poster forHoles" />
+    
+      <a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
+        <span hidden>Favorite</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+
+      </a>
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">The French Dispatch</h3>
+      <h3 class="subtitle">Holes</h3>
     </header>
-    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">4/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
-            <div class="card">
-  <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle card-title-long">The School for Good and Evil</h3>
-    </header>
-    <div>Two friends embark on a fairy tale at a school for heroes and villains</div>
     <div class="cluster spacing:between">
       <div class="cluster s1 align:center">
         Rating:
         <span class="numbers">3/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/the-school-for-good-and-evil/">
+        <a class="button" href="/film/reviews/holes/">
           Read review
         </a>
     </div>
@@ -699,6 +681,54 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BNzM1ODI4Y2UtMGYxMS00OTUxLWE4NzItNjgxMTM2NzRjZThkXkEyXkFqcGdeQXVyMTA1OTcyNDQ4._V1_SX800.webp alt="Poster forThe School for Good and Evil" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle card-title-long">The School for Good and Evil</h3>
+    </header>
+    <div>Two friends embark on a fairy tale at a school for heroes and villains</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">3/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-school-for-good-and-evil/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="Poster forThe French Dispatch" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">The French Dispatch</h3>
+    </header>
+    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">4/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/the-french-dispatch/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
             <div class="card">
   <div class="card-image">
     <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="Poster forNo Reservations" />
@@ -723,36 +753,6 @@
 </div>
 
           
-            <div class="card">
-  <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Poster forHoles" />
-    
-      <a class="card-favorite-star" href="https://caalden.github.io/film/favorites">
-        <span hidden>Favorite</span>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="yellow" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-
-      </a>
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Holes</h3>
-    </header>
-    <div>A boy is sent to a juvenile work camp as punishment after being mistakenly arrested</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">3/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/holes/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
         </div>
       </section>
     
@@ -959,30 +959,6 @@
         </header>
         <div class="carasol">
           
-            <div class="card">
-  <div class="card-image">
-    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forWhisper of the Heart" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Whisper of the Heart</h3>
-    </header>
-    <div>A slice of life story about a bookish middle school girl living in Tokyo</div>
-    <div class="cluster spacing:between">
-      <div class="cluster s1 align:center">
-        Rating:
-        <span class="numbers">5/5</span>
-      </div>
-      <div>
-        <a class="button" href="/film/reviews/whisper-of-the-heart/">
-          Read review
-        </a>
-    </div>
-  </div>
-</div>
-
-          
             <div class="card">
   <div class="card-image">
     <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTI1NzQ5MzU1OV5BMl5BanBnXkFtZTcwNzExODU0MQ@@._V1_SX800.webp alt="Poster forNo Reservations" />
@@ -1031,6 +1007,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Poster forWhisper of the Heart" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Whisper of the Heart</h3>
+    </header>
+    <div>A slice of life story about a bookish middle school girl living in Tokyo</div>
+    <div class="cluster spacing:between">
+      <div class="cluster s1 align:center">
+        Rating:
+        <span class="numbers">5/5</span>
+      </div>
+      <div>
+        <a class="button" href="/film/reviews/whisper-of-the-heart/">
+          Read review
+        </a>
+    </div>
+  </div>
+</div>
+
+          
         </div>
       </section>
     

docs/style.css

@@ -2,31 +2,31 @@
   --title-font-family: 'Merriweather', serif;
   --title-font-weight: 700;
   --title-font-line-height: 1.25;
-  --title-font-size: 64px;
+  --title-font-size: min(40px + 2vw, 64px);
   --title-font-letter-spacing: -0.04em;
 
   --h2-font-family: 'Merriweather', serif;
   --h2-font-weight: 700;
   --h2-font-line-height: 1.2;
-  --h2-font-size: 40px;
+  --h2-font-size: min(28px + 1vw, 40px);
   --h2-font-letter-spacing: -0.02em;
 
   --subtitle-font-family: 'Rufina', serif;
   --subtitle-font-weight: 700;
   --subtitle-font-line-height: 1.25;
-  --subtitle-font-size: 24px;
+  --subtitle-font-size: min(24px, 20px + 1vw);
   --subtitle-font-letter-spacing: -0.02em;
 
   --subtitle-small-font-family: 'Rufina', serif;
   --subtitle-small-font-weight: 400;
   --subtitle-small-line-height: 1.25;
-  --subtitle-small-font-size: 20px;
+  --subtitle-small-font-size: min(16px + 1vw, 20px);
   --subtitle-small-font-letter-spacing: -0.02em;
 
   --body-font-family: 'Inika', serif;
   --body-font-weight: 400;
   --body-font-line-height: 1.625;
-  --body-font-size: 16px;
+  --body-font-size: min(13px + 1vw, 16px);
   --body-font-letter-spacing: 0.04em;
 
   --caption-font-family: 'Inika', serif;
@@ -45,9 +45,9 @@
   --numbers-font-family: 'Monaco', sans-serif;
   --numbers-font-weight: 400;
   --numbers-font-line-height: 1.2;
-  --numbers-font-size: 16px;
+  --numbers-font-size: min(13px + 1vw, 16px);
   --numbers-font-size-small: 12px;
-  --numbers-font-size-large: 40px;
+  --numbers-font-size-large: min(28px + 1vw, 40px);
   --numbers-font-letter-spacing: -0.02em;
 
   --color-primary: #FFFFFF;

static/style.css

@@ -2,31 +2,31 @@
   --title-font-family: 'Merriweather', serif;
   --title-font-weight: 700;
   --title-font-line-height: 1.25;
-  --title-font-size: 64px;
+  --title-font-size: min(40px + 2vw, 64px);
   --title-font-letter-spacing: -0.04em;
 
   --h2-font-family: 'Merriweather', serif;
   --h2-font-weight: 700;
   --h2-font-line-height: 1.2;
-  --h2-font-size: 40px;
+  --h2-font-size: min(28px + 1vw, 40px);
   --h2-font-letter-spacing: -0.02em;
 
   --subtitle-font-family: 'Rufina', serif;
   --subtitle-font-weight: 700;
   --subtitle-font-line-height: 1.25;
-  --subtitle-font-size: 24px;
+  --subtitle-font-size: min(24px, 20px + 1vw);
   --subtitle-font-letter-spacing: -0.02em;
 
   --subtitle-small-font-family: 'Rufina', serif;
   --subtitle-small-font-weight: 400;
   --subtitle-small-line-height: 1.25;
-  --subtitle-small-font-size: 20px;
+  --subtitle-small-font-size: min(16px + 1vw, 20px);
   --subtitle-small-font-letter-spacing: -0.02em;
 
   --body-font-family: 'Inika', serif;
   --body-font-weight: 400;
   --body-font-line-height: 1.625;
-  --body-font-size: 16px;
+  --body-font-size: min(13px + 1vw, 16px);
   --body-font-letter-spacing: 0.04em;
 
   --caption-font-family: 'Inika', serif;
@@ -45,9 +45,9 @@
   --numbers-font-family: 'Monaco', sans-serif;
   --numbers-font-weight: 400;
   --numbers-font-line-height: 1.2;
-  --numbers-font-size: 16px;
+  --numbers-font-size: min(13px + 1vw, 16px);
   --numbers-font-size-small: 12px;
-  --numbers-font-size-large: 40px;
+  --numbers-font-size-large: min(28px + 1vw, 40px);
   --numbers-font-letter-spacing: -0.02em;
 
   --color-primary: #FFFFFF;