Add upcoming section

assets/css/main.css

@@ -54,7 +54,7 @@ a {
     color: #fff;
     font-family: lexend, sans-serif;
     font-optical-sizing: auto;
-    font-weight: 500;
+    font-weight: 600;
     font-style: normal;
     font-size: 24px;
     text-decoration: none;
@@ -222,6 +222,8 @@ main {
     margin: 3.8em auto;
     max-width: 1000px;
     padding: 0 4em;
+    display: grid;
+    gap: 40px;
 }
 
 .concerts {
@@ -233,12 +235,11 @@ main {
 }
 
 .concert-entry {
-    margin: 0.8em 0;
     padding: 20px;
     display: flex;
     gap: 1em;
-    border: 2px #000 solid;
-    border-radius: 20px;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    border-radius: 15px;
     align-items: center;
     background-color: #fff;
 }
@@ -257,7 +258,10 @@ main {
 }
 
 .concert-overview {
+    display: flex;
+    flex-direction: column;
     flex-grow: 8;
+    padding: 0 10px;
 }
 
 .concert-overview > h2,
@@ -269,25 +273,45 @@ main {
     min-height: 5.5em;
 }
 
+.separator {
+    overflow: hidden;
+    width: 90%;
+    height: 1px;
+    align-self: center;
+    margin: 20px 0;
+}
+
 .concert-buttons {
+    width: 100%;
+    margin-top: 10px;
     display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 1em;
-    flex-grow: 1;
+    flex-direction: row;
+    justify-content: space-evenly;
 }
 
 .concert-button {
-    padding: 10px;
-    border: 1px #000 solid;
-    border-radius: 5px;
-    background-color: #f3e2c8;
-    text-align: center;
-    text-decoration: none;
-    font-family: lexend, sans-serif;
-    font-weight: 350;
-    font-size: 18px;
-    color: #000;
+    background-color: transparent;
+    border: none;
+    color: #777;
+    margin: 0 5px 0 5px;
+}
+
+.concert-button > span {
+    text-decoration: underline;
+    font-weight: bold;
+}
+
+.upcoming {
+    background-color: #fff;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    border-radius: 15px;
+}
+
+.upcoming-entry {
+    margin-left: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 @media (max-width: 750px) {
@@ -322,18 +346,12 @@ main {
         grid-template-columns: 3fr 8fr;
     }
 
-    .concert-date {
+    .concert-entry-small .concert-date {
         color: #777;
-        font-size: 1.1em;
+        font-size: 0.8em;
         margin: 15px 0 15px 0;
     }
 
-    .separator {
-        overflow: hidden;
-        width: 90%;
-        height: 1px;
-    }
-
     .concert-cover {
         margin-top: 25px;
         margin-left: 10px;
@@ -373,6 +391,10 @@ main {
         text-decoration: underline;
         font-weight: bold;
     }
+
+    .upcoming h2 {
+        font-size: 1.3em;
+    }
 }
 
 footer {