From 22459e87ddfc3e15958123585dc140d49754b034 Mon Sep 17 00:00:00 2001
From: Campbell Alden <campbell.alden@bibo.com.ph>
Date: Wed, 19 Oct 2022 17:36:05 +0900
Subject: [PATCH] PUBLISH: Republish all reviews with the new metadata

---
 docs/404.html                                |   1 +
 docs/about/index.html                        |   1 +
 docs/favorites/index.html                    |   1 +
 docs/genres/action/index.html                |   1 +
 docs/genres/adventure/index.html             |   1 +
 docs/genres/comedy/index.html                |   1 +
 docs/genres/crime/index.html                 |   1 +
 docs/genres/drama/index.html                 |   1 +
 docs/genres/family/index.html                |   1 +
 docs/genres/horror/index.html                |   1 +
 docs/genres/index.html                       | 263 ++++++++++---------
 docs/genres/mystery/index.html               |   1 +
 docs/genres/romance/index.html               |   1 +
 docs/genres/sci-fi/index.html                |   1 +
 docs/genres/thriller/index.html              |   1 +
 docs/index.html                              |   1 +
 docs/metadetails.css                         |  19 ++
 docs/ratings/index.html                      |   1 +
 docs/reviews/beverly-hills-cop/index.html    |  38 +++
 docs/reviews/fright-night/index.html         |  38 +++
 docs/reviews/holes/index.html                |  38 +++
 docs/reviews/in-time/index.html              |  38 +++
 docs/reviews/kingsman/index.html             |  38 +++
 docs/reviews/no-reservations/index.html      |  38 +++
 docs/reviews/now-you-see-me-2/index.html     |  38 +++
 docs/reviews/now-you-see-me/index.html       |  38 +++
 docs/reviews/the-french-dispatch/index.html  |  38 +++
 docs/reviews/whisper-of-the-heart/index.html |  38 +++
 docs/style.css                               |   2 +-
 29 files changed, 548 insertions(+), 132 deletions(-)
 create mode 100644 docs/metadetails.css

diff --git a/docs/404.html b/docs/404.html
index 09f93f5..56ecadc 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/about/index.html b/docs/about/index.html
index d53e3f0..0f6fe5c 100644
--- a/docs/about/index.html
+++ b/docs/about/index.html
@@ -23,6 +23,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/favorites/index.html b/docs/favorites/index.html
index 4fb6b4b..ffbd065 100644
--- a/docs/favorites/index.html
+++ b/docs/favorites/index.html
@@ -23,6 +23,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/action/index.html b/docs/genres/action/index.html
index 31fc2ec..6890948 100644
--- a/docs/genres/action/index.html
+++ b/docs/genres/action/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/adventure/index.html b/docs/genres/adventure/index.html
index 5a4394d..76868f1 100644
--- a/docs/genres/adventure/index.html
+++ b/docs/genres/adventure/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/comedy/index.html b/docs/genres/comedy/index.html
index 11859ac..1543578 100644
--- a/docs/genres/comedy/index.html
+++ b/docs/genres/comedy/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/crime/index.html b/docs/genres/crime/index.html
index 72f2668..2711692 100644
--- a/docs/genres/crime/index.html
+++ b/docs/genres/crime/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/drama/index.html b/docs/genres/drama/index.html
index 581abcb..6008dac 100644
--- a/docs/genres/drama/index.html
+++ b/docs/genres/drama/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/family/index.html b/docs/genres/family/index.html
index 303ccf5..714ad11 100644
--- a/docs/genres/family/index.html
+++ b/docs/genres/family/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/horror/index.html b/docs/genres/horror/index.html
index ab1f8ee..1e95219 100644
--- a/docs/genres/horror/index.html
+++ b/docs/genres/horror/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/index.html b/docs/genres/index.html
index 7d4a22e..aeb07de 100644
--- a/docs/genres/index.html
+++ b/docs/genres/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -58,51 +59,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
-    
-      <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>
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BMjA3NzI1ODc1MV5BMl5BanBnXkFtZTcwMzI5NjQwNg@@._V1_SX800.webp alt="In Time" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Fright Night</h3>
+      <h3 class="subtitle">In Time</h3>
     </header>
-    <div>A high school student suspects his next door neighbor is a vampire</div>
+    <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/fright-night/">
-          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/MV5BN2MyZDE0YjAtNWFjYy00MWRlLTk3MTktMzY3ZDVhNTJkZTlmXkEyXkFqcGdeQXVyNDk3NzU2MTQ@._V1_SX800.webp alt="Beverly Hills Cop" />
-    
-  </div>
-  <section class="card-content">
-    <header>
-      <h3 class="subtitle">Beverly Hills Cop</h3>
-    </header>
-    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</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/beverly-hills-cop/">
+        <a class="button" href="/film/reviews/in-time/">
           Read review
         </a>
     </div>
@@ -134,6 +105,60 @@
 </div>
 
           
+            <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="Beverly Hills Cop" />
+    
+  </div>
+  <section class="card-content">
+    <header>
+      <h3 class="subtitle">Beverly Hills Cop</h3>
+    </header>
+    <div>A Detroit cop comes to Beverly Hills to find the man who murdered his friend</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/beverly-hills-cop/">
+          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/MV5BMTU2MDc0NDY0M15BMl5BanBnXkFtZTcwOTgzMTYyNQ@@._V1_SX800.webp alt="Fright Night" />
+    
+      <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">Fright Night</h3>
+    </header>
+    <div>A high school student suspects his next door neighbor is a vampire</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/fright-night/">
+          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/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
@@ -158,30 +183,6 @@
 </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="In 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>
       </section>
     
@@ -360,30 +361,6 @@
 </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="Kingsman: 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 loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
@@ -408,16 +385,6 @@
 </div>
 
           
-        </div>
-      </section>
-    
-      <section>
-        <header class="cluster spacing:between p1" style="align-items: flex-end;">
-          <h2>Comedy</h2>
-          <a href="comedy" class="button button:large">See more</a>
-        </header>
-        <div class="carasol">
-          
             <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="Kingsman: The Secret Service" />
@@ -442,6 +409,16 @@
 </div>
 
           
+        </div>
+      </section>
+    
+      <section>
+        <header class="cluster spacing:between p1" style="align-items: flex-end;">
+          <h2>Comedy</h2>
+          <a href="comedy" class="button button:large">See more</a>
+        </header>
+        <div class="carasol">
+          
             <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="The French Dispatch" />
@@ -468,21 +445,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now You See Me 2" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYTM3ZTllNzItNTNmOS00NzJiLTg1MWMtMjMxNDc0NmJhODU5XkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Kingsman: The Secret Service" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Now You See Me 2</h3>
+      <h3 class="subtitle card-title-long">Kingsman: The Secret Service</h3>
     </header>
-    <div>A group of magicians are coerced into pulling off another heist</div>
+    <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">2/5</span>
+        <span class="numbers">4/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/now-you-see-me-2/">
+        <a class="button" href="/film/reviews/kingsman/">
           Read review
         </a>
     </div>
@@ -544,6 +521,30 @@
 </div>
 
           
+            <div class="card">
+  <div class="card-image">
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BYjhlNDljNTgtZjc4My00NmZmLTk2YzAtYWE5MDYwYjM4MTkzXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX800.webp alt="Now 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>
       </section>
     
@@ -602,6 +603,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="The 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/MV5BMTg0MTU5ODkwM15BMl5BanBnXkFtZTYwMzgxNzY3._V1_SX800.webp alt="Holes" />
@@ -632,30 +657,6 @@
 </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="The 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>
     
@@ -702,21 +703,21 @@
           
             <div class="card">
   <div class="card-image">
-    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX800.webp alt="The French Dispatch" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">Whisper of the Heart</h3>
+      <h3 class="subtitle">The French Dispatch</h3>
     </header>
-    <div>A slice of life story about a bookish middle school girl living in Tokyo</div>
+    <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">5/5</span>
+        <span class="numbers">4/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/whisper-of-the-heart/">
+        <a class="button" href="/film/reviews/the-french-dispatch/">
           Read review
         </a>
     </div>
@@ -750,21 +751,21 @@
           
             <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="The French Dispatch" />
+    <img loading="lazy" class="card-image" src=https://m.media-amazon.com/images/M/MV5BZDg0MWNmNjktMGEwZC00ZDlmLWI1MTUtMDBmNjQzMWM2NjBjXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX800.webp alt="Whisper of the Heart" />
     
   </div>
   <section class="card-content">
     <header>
-      <h3 class="subtitle">The French Dispatch</h3>
+      <h3 class="subtitle">Whisper of the Heart</h3>
     </header>
-    <div>Authors for a New Yorker-esque magazine report on a small town in France</div>
+    <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">4/5</span>
+        <span class="numbers">5/5</span>
       </div>
       <div>
-        <a class="button" href="/film/reviews/the-french-dispatch/">
+        <a class="button" href="/film/reviews/whisper-of-the-heart/">
           Read review
         </a>
     </div>
diff --git a/docs/genres/mystery/index.html b/docs/genres/mystery/index.html
index 1a2790b..c0a5004 100644
--- a/docs/genres/mystery/index.html
+++ b/docs/genres/mystery/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/romance/index.html b/docs/genres/romance/index.html
index b46dcfa..6ca69a2 100644
--- a/docs/genres/romance/index.html
+++ b/docs/genres/romance/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/sci-fi/index.html b/docs/genres/sci-fi/index.html
index c2414ed..28005a0 100644
--- a/docs/genres/sci-fi/index.html
+++ b/docs/genres/sci-fi/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/genres/thriller/index.html b/docs/genres/thriller/index.html
index 07e77fd..d4786de 100644
--- a/docs/genres/thriller/index.html
+++ b/docs/genres/thriller/index.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/index.html b/docs/index.html
index 6c0c3f0..50bde90 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -24,6 +24,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/metadetails.css b/docs/metadetails.css
new file mode 100644
index 0000000..00d78fd
--- /dev/null
+++ b/docs/metadetails.css
@@ -0,0 +1,19 @@
+.metadetails-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.metadetails-row {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+  justify-content: center;
+}
+
+.metadetails-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/docs/ratings/index.html b/docs/ratings/index.html
index 895005d..444bd47 100644
--- a/docs/ratings/index.html
+++ b/docs/ratings/index.html
@@ -23,6 +23,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
diff --git a/docs/reviews/beverly-hills-cop/index.html b/docs/reviews/beverly-hills-cop/index.html
index 2e9da4f..967c237 100644
--- a/docs/reviews/beverly-hills-cop/index.html
+++ b/docs/reviews/beverly-hills-cop/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0086960" title="Link to IMDb page for Beverly Hills Cop">IMDb</a>
+      </dt>
+      <dd class="numbers">7.3/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/beverly_hills_cop" title="Link to Rotten Tomatoes page for Beverly Hills Cop">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">83%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/beverly-hills-cop" title="Link to Metacritic page for Beverly Hills Cop">Metacritic</a>
+      </dt>
+      <dd class="numbers">66/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">1984</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$234,760,478</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I ended up watching this because it came up in a <a href="https://framed.wtf">framed</a> and I realized that it&rsquo;s one of those movies I&rsquo;ve heard referenced a million times but haven&rsquo;t seen.</p>
diff --git a/docs/reviews/fright-night/index.html b/docs/reviews/fright-night/index.html
index 5f02c8d..74b3fea 100644
--- a/docs/reviews/fright-night/index.html
+++ b/docs/reviews/fright-night/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -102,6 +103,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt1438176" title="Link to IMDb page for Fright Night">IMDb</a>
+      </dt>
+      <dd class="numbers">6.4/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/fright_night_2011" title="Link to Rotten Tomatoes page for Fright Night">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">72%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/fright-night" title="Link to Metacritic page for Fright Night">Metacritic</a>
+      </dt>
+      <dd class="numbers">64/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2011</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$18,302,607</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>Horror is sometimes a difficult genre to persuade people to watch. Many people make a blanket claim to never watch horror movies, but to those people I offer up <em>Fright Night</em> as a gateway into the genre. This movie strikes a great balance between more comedic or light hearted elements along with sinister horror. Most of the levity comes from Colin Farrell leaning into and really hamming it up as the movies antagonist.</p>
diff --git a/docs/reviews/holes/index.html b/docs/reviews/holes/index.html
index c341826..882ec4f 100644
--- a/docs/reviews/holes/index.html
+++ b/docs/reviews/holes/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -104,6 +105,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0311289" title="Link to IMDb page for Holes">IMDb</a>
+      </dt>
+      <dd class="numbers">7.0/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/holes" title="Link to Rotten Tomatoes page for Holes">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">78%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/holes" title="Link to Metacritic page for Holes">Metacritic</a>
+      </dt>
+      <dd class="numbers">71/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2003</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$67,406,573</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I could go either way on this film when it comes to a recommendation. I think its plot and characters are well suited for child viewers which is probably why I remembered it so fondly. As an adult I&rsquo;m not sure I would recommend watching it. Many of the characters are fairly one dimensional and aren&rsquo;t always given enough time to interact with one another to earn the emotional payoffs that are set up.</p>
diff --git a/docs/reviews/in-time/index.html b/docs/reviews/in-time/index.html
index d5a16a2..75d46e3 100644
--- a/docs/reviews/in-time/index.html
+++ b/docs/reviews/in-time/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt1637688" title="Link to IMDb page for In Time">IMDb</a>
+      </dt>
+      <dd class="numbers">6.7/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/in_time" title="Link to Rotten Tomatoes page for In Time">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">37%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/in-time" title="Link to Metacritic page for In Time">Metacritic</a>
+      </dt>
+      <dd class="numbers">53/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2011</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG-13</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$37,520,095</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>This movie gets a recommendation from me, but I have a few specific things that perhaps bias my opinion. As a flat sci-fi action movie, I think this film works. There are aspects of a rags-to-riches story here that people may find entertaining. It falls back on a relatively anti-capitalist message which is a take you don&rsquo;t typically see in mainstream blockbusters.</p>
diff --git a/docs/reviews/kingsman/index.html b/docs/reviews/kingsman/index.html
index 90e7ec0..043169c 100644
--- a/docs/reviews/kingsman/index.html
+++ b/docs/reviews/kingsman/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt2802144" title="Link to IMDb page for Kingsman: The Secret Service">IMDb</a>
+      </dt>
+      <dd class="numbers">7.7/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/kingsman_the_secret_service" title="Link to Rotten Tomatoes page for Kingsman: The Secret Service">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">75%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/kingsman-the-secret-service" title="Link to Metacritic page for Kingsman: The Secret Service">Metacritic</a>
+      </dt>
+      <dd class="numbers">60/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2014</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$128,261,724</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p><em>Kingsman</em> is easy for me to recommend because on a base level the plot is entertaining, the fight scenes are engaging and varied, and the movie&rsquo;s higher level commentary on society and meta level commentary on spy movies are all interesting.</p>
diff --git a/docs/reviews/no-reservations/index.html b/docs/reviews/no-reservations/index.html
index 86305ea..37b9986 100644
--- a/docs/reviews/no-reservations/index.html
+++ b/docs/reviews/no-reservations/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -96,6 +97,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0481141" title="Link to IMDb page for No Reservations">IMDb</a>
+      </dt>
+      <dd class="numbers">6.3/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/no_reservations" title="Link to Rotten Tomatoes page for No Reservations">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">42%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/no-reservations" title="Link to Metacritic page for No Reservations">Metacritic</a>
+      </dt>
+      <dd class="numbers">50/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2007</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$43,107,979</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>The story sets up a female chef in the city who’s work has become her obsession, but her lifestyle is radically changed by a family tragedy. Via this tragedy the film sets itself up with some ambitious topics to tackle, however, unfortunately for the most part it doesn’t address these themes. The movie is trying to be a full drama and a full romance and it just doesn’t fully work.</p>
diff --git a/docs/reviews/now-you-see-me-2/index.html b/docs/reviews/now-you-see-me-2/index.html
index 8739cac..f227eb0 100644
--- a/docs/reviews/now-you-see-me-2/index.html
+++ b/docs/reviews/now-you-see-me-2/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt3110958" title="Link to IMDb page for Now You See Me 2">IMDb</a>
+      </dt>
+      <dd class="numbers">6.4/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/now_you_see_me_2" title="Link to Rotten Tomatoes page for Now You See Me 2">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">34%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/now-you-see-me-2" title="Link to Metacritic page for Now You See Me 2">Metacritic</a>
+      </dt>
+      <dd class="numbers">46/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2016</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG-13</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$65,075,540</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I will just come out and say, I don&rsquo;t recommend this movie. I can&rsquo;t recommend it if you haven&rsquo;t seen the first one because the plot relies heavily on the events from the previous film, but at the same time, I wouldn&rsquo;t recommend this to people who like the first film because it fails to recreate the style that made that movie enjoyable.</p>
diff --git a/docs/reviews/now-you-see-me/index.html b/docs/reviews/now-you-see-me/index.html
index 36bfec1..4fb69aa 100644
--- a/docs/reviews/now-you-see-me/index.html
+++ b/docs/reviews/now-you-see-me/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -104,6 +105,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt1670345" title="Link to IMDb page for Now You See Me">IMDb</a>
+      </dt>
+      <dd class="numbers">7.2/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/now_you_see_me" title="Link to Rotten Tomatoes page for Now You See Me">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">50%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/now-you-see-me" title="Link to Metacritic page for Now You See Me">Metacritic</a>
+      </dt>
+      <dd class="numbers">50/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2013</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">PG-13</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$117,723,989</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I have seen <em>Now You See Me</em> many times and still haven&rsquo;t gotten bored of it. At a base level, it is a fun crime movie with lots of twists and turns. Layered on top of that, the filmmakers put a lot of effort into making the magic tricks they depict realistic. Even if you ignore the plot, there is all the entertainment of a regular magic show.</p>
diff --git a/docs/reviews/the-french-dispatch/index.html b/docs/reviews/the-french-dispatch/index.html
index a3c68a9..cc3406e 100644
--- a/docs/reviews/the-french-dispatch/index.html
+++ b/docs/reviews/the-french-dispatch/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt8847712" title="Link to IMDb page for The French Dispatch">IMDb</a>
+      </dt>
+      <dd class="numbers">7.2/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/the_french_dispatch" title="Link to Rotten Tomatoes page for The French Dispatch">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">75%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/the-french-dispatch" title="Link to Metacritic page for The French Dispatch">Metacritic</a>
+      </dt>
+      <dd class="numbers">74/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">2021</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">R</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$16,124,375</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>I found this movie very charming and would certainly recommend it. I am a sucker for Wes Anderson films and this was no exception. <strong>The French Dispatch</strong> is very funny without many outright jokes and is visually pleasing in the standard Wes Anderson style. It is made up of several view points and individual stories with a binding narrative that pulls things together just well enough that the movie as a whole feels coherent.</p>
diff --git a/docs/reviews/whisper-of-the-heart/index.html b/docs/reviews/whisper-of-the-heart/index.html
index 27d291c..948e331 100644
--- a/docs/reviews/whisper-of-the-heart/index.html
+++ b/docs/reviews/whisper-of-the-heart/index.html
@@ -31,6 +31,7 @@
   <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
+  <link rel="stylesheet" href="/film/metadetails.css">
   
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-PF672BTD8F"></script>
   <script>
@@ -98,6 +99,43 @@
 
 </section>
 
+    <dl class="metadetails-list">
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.imdb.com/title/tt0113824" title="Link to IMDb page for Whisper of the Heart">IMDb</a>
+      </dt>
+      <dd class="numbers">7.9/10</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.rottentomatoes.com/m/whisper-of-the-heart" title="Link to Rotten Tomatoes page for Whisper of the Heart">Rotten Tomatoes</a>
+      </dt>
+      <dd class="numbers">94%</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">
+      <a href="https://www.metacritic.com/movie/whisper-of-the-heart" title="Link to Metacritic page for Whisper of the Heart">Metacritic</a>
+      </dt>
+      <dd class="numbers">75/100</dd>
+    </div>
+  </div>
+  <div class="metadetails-row">
+    <div class="metadetails-column">
+      <dt class="caption">Year</dt>
+      <dd class="numbers">1995</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Rated</dt>
+      <dd class="numbers">G</dd>
+    </div>
+    <div class="metadetails-column">
+      <dt class="caption">Box Office</dt>
+      <dd class="numbers">$498,156</dd>
+    </div>
+  </div>
+</dl>
+
   </header>
   <div class="core-content"><h2 id="recommendation">Recommendation</h2>
 <p>Recommending Studio Ghibli movies is pretty easy, and this is no exception. The art and music are both excellent and the story is cute and light hearted. It&rsquo;s difficult to give specific reasons for watching the movie without getting into spoilers because the content of the film is what gives it the atmosphere that makes me want to recommend it.</p>
diff --git a/docs/style.css b/docs/style.css
index 5b80772..4d7f2d4 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -44,7 +44,7 @@
 
   --numbers-font-family: 'Monaco', sans-serif;
   --numbers-font-weight: 400;
-  --numbers-font-line-height: 1;
+  --numbers-font-line-height: 1.2;
   --numbers-font-size: 16px;
   --numbers-font-size-large: 40px;
   --numbers-font-letter-spacing: -0.02em;