add program lines style mobile

assets/css/src/collapsable-section.css

@@ -76,14 +76,17 @@
 }
 
 @media screen and (min-width: 800px) {
-  .session .left-column {
+  .session .left-column,
+  .session .right-column {
     display: contents;
   }
 }
 
 @media screen and (max-width: 800px) {
   .collapsable__content .session {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr !important;
+    column-gap: 9vw;
+    font-size: 1rem;
   }
 
   .collapsable__content .session .ticket-link,
@@ -91,9 +94,6 @@
     display: block;
   }
 
-  .collapsable__content .session {
-    font-size: 1rem;
-  }
   .collapsable__content .session .ticket-link {
     font-size: 0.8rem;
     text-align: right;
@@ -105,4 +105,20 @@
   .collapsable__content .session svg {
     width: 1.8rem;
   }
+
+  [data-template="program"] .collapsable__content .session__info--ticket {
+    order: -1;
+  }
+
+  [data-template="program"] .collapsable__content .right-column {
+    font-size: var(--font-size-s);
+    text-align: right;
+  }
+
+  .session .right-column {
+    justify-self: end;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
 }

assets/css/src/generic.css

@@ -200,7 +200,14 @@ img.show {
   opacity: 1;
 }
 
+.mobile-group {
+  display: contents;
+}
+
 @media screen and (max-width: 800px) {
+  .mobile-group {
+    display: block;
+  }
   .logo {
     font-size: 6vw;
   }

assets/css/src/variables.css

@@ -49,6 +49,7 @@
     --font-size-h4: 1.25rem;
     --font-size-h5: 1.25rem;
     --font-size-m: 0.9375rem;
+    --font-size-s: 0.8125rem;
 
     --padding-vertical: 1rem;
   }