radiocampus: integrate marielle design, episodes page

radiocampus/static/radiocampus/radiocampus.css

@@ -17,6 +17,8 @@
     --button-hv-fg: #1d3cab;
     --button-active-fg: white;
     --button-active-bg: #738ef2;
+    --cover-small-h: 10rem;
+    --cover-small-w: 10rem;
     --heading-font-family: "campus_grotesk";
     --header-height: 320px;
     --heading-link-hv-fg: #aa217b;
@@ -139,6 +141,15 @@ a.heading.title:hover {
 .header.has-cover {
     min-height: unset;
 }
+.grid.listfive {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-auto-flow: dense;
+    gap: 0.2rem;
+}
+.grid.listfive .media-content {
+    margin-top: 0.4rem;
+    font-size: 0.84rem;
+}
 .today {
    color:  yellow;
    font-size: 1.4em !important;
@@ -162,6 +173,10 @@ a.heading.title:hover {
 .page section.container {
     margin-top: 0;
 }
+.program-list {
+    flex-direction: column;
+}
+
 .radiocampus-grid {
     display: block;
 }
@@ -217,6 +232,7 @@ a.heading.title:hover {
     }
 }
 
+
 @media screen and (max-width: 1024px) {
     :root {
         --header-height: 200px;
@@ -237,6 +253,9 @@ a.heading.title:hover {
     .dropdown.is-right .dropdown-menu {
         left: 0;
     }
+    .grid.listfive {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
     #grandlogo {
         display: none;
     }
@@ -276,6 +295,12 @@ a.heading.title:hover {
     }
 }
 
+@media screen and (max-width: 900px) {
+  .grid.listfive {
+        grid-template-columns: 1fr 1fr;
+  }
+}
+
 .list-item .headings {
     margin-bottom: .2rem !important;
 }