Update program title styling

pages/program.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { FiExternalLink } from 'react-icons/fi';
 import shared from '../styles/Shared.module.scss';
-import program from '../styles/Program.module.scss';
+import styles from '../styles/Program.module.scss';
 
 interface DayToggles {
   wed: boolean;
@@ -30,25 +30,37 @@ const Program = () => {
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
 
-      <h2>
-        20.7. Laituri{' '}
-        <a href='https://www.cafelaituri.fi'>
-          <FiExternalLink fontSize={20} />
-        </a>
+      <h2 className={styles.programTitle}>
+        <div>20.7.</div>
+        <div>
+          <span className={styles.placeName}>Laituri</span>
+          <a href='https://www.cafelaituri.fi'>
+            <FiExternalLink fontSize={20} />
+          </a>
+        </div>
+        <div />
       </h2>
       <p>Café Laituri, Voiponlahdentie 37, Palva</p>
-      <h2>
-        21.7. Vaihela{' '}
-        <a href='https://vaihela.fi/'>
-          <FiExternalLink fontSize={20} />
-        </a>
+      <h2 className={styles.programTitle}>
+        <div>21.7.</div>
+        <div>
+          <span className={styles.placeName}>Vaihela</span>
+          <a href='https://vaihela.fi/'>
+            <FiExternalLink fontSize={20} />
+          </a>
+        </div>
+        <div />
       </h2>
       <p>Saaristohotelli Vaihela, Velkuanmaantie 168, Palva</p>
-      <h2>
-        22.7. Sinervo{' '}
-        <a href='https://www.prosinervo.com/'>
-          <FiExternalLink fontSize={20} />
-        </a>
+      <h2 className={styles.programTitle}>
+        <div>22.7.</div>
+        <div>
+          <span className={styles.placeName}>Sinervo</span>
+          <a href='https://www.prosinervo.com/'>
+            <FiExternalLink fontSize={20} />
+          </a>
+        </div>
+        <div />
       </h2>
       <p style={{ marginBottom: 50 }}>
         Sinervon talo, Sauniementie 5, Teersalo

styles/Program.module.scss

@@ -21,9 +21,10 @@
 
 .programTitle {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  align-items: baseline;
+  justify-content: space-evenly;
   width: 80%;
+  max-width: 25rem;
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   margin-top: 1.5rem;
@@ -38,3 +39,8 @@
     transition: color 0.3s;
   }
 }
+
+.placeName {
+  font-size: 2.5rem;
+  margin-right: 1rem;
+}