Clean up modal layout (but css is a mess)

index.html

@@ -298,7 +298,7 @@ <h3>
     <a class="logo" href="/">
         <img src="images/logo.svg" alt="logo for the trans-europe-planner">
     </a>
-    <div>
+    <div class="claim">
         <h1>
             <span lang="de">Willkommen beim Trans Europa Planer</span>
             <span lang="en">Welcome to Trans Europa Planer</span>
@@ -313,7 +313,7 @@ <h3>
     <div id="choose-home">
         <h1>
             <span lang="de">Wo soll die Reise starten?</span>
-            <span lang="en">Where should your trip start?</span>
+            <span lang="en">Where is your trip starting?</span>
         </h1>
         <div>
             <a href="?start=Berlin">Berlin</a>

style/components/modal.css

@@ -11,20 +11,12 @@
   top: 50%;
   transform: translate(-50%, -50%);
 
-  min-height: 50%;
-  min-width: 50%;
-
-    overflow: hidden;
+  overflow: hidden;
 
   --logo-size: 6rem;
 }
 
 @media only screen and (max-width: 1000px) {
-    #modal {
-      min-width: 80%;
-      min-height: 80%;
-    }
-
   #modal h1 {
     font-size: 1.5rem;
   }
@@ -35,36 +27,43 @@
 }
 
 #modal {
+  padding-bottom: 1rem;
   display: grid;
+
   grid-auto-flow: row;
-  grid-template-columns: calc(var(--logo-size) * 2) 1fr;
-  grid-template-rows: min(min-content, calc(var(--logo-size) * 2)) 1fr;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+
 }
 
 #modal > * {
   height: 100%;
   width: 100%;
 
-  padding-right: 1rem;
-
   display: flex;
   flex-direction: column;
 
   justify-content: center;
   align-content: center;
 }
 
-
 #modal .logo img,
 #modal .marker {
   align-self: center;
   height: var(--logo-size);
+  padding: 1rem;
+}
+
+#modal .claim {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 #modal #choose-home {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  padding: 1rem;
 }
 
 #modal #choose-home div {