start event card content and add schedule method

assets/css/src/events-grid.css

@@ -1 +1,7 @@
+.events-grid {
+  padding: var(--space-m);
+}
 
+.events-grid h4 {
+  margin-bottom: 1rem;
+}

assets/css/src/generic.css

@@ -4,5 +4,11 @@ body.progress * {
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(12, 1fr);
+  column-gap: var(--space-m);
+  row-gap: calc(var(--space-m) / 2);
+}
+
+.grid__item {
+  grid-column: span var(--span);
 }

assets/css/src/text.css

@@ -9,7 +9,7 @@
   font-weight: bold;
 }
 body {
-  font-family: "Joker";
+  font-family: "Joker", sans-serif;
   font-size: var(--font-size-body);
 }
 
@@ -30,3 +30,9 @@ h3,
   font-size: var(--font-size-h3);
   font-weight: normal;
 }
+
+h4,
+.h4 {
+  font-size: var(--font-size-h4);
+  font-weight: bold;
+}

assets/css/src/vanilla.css

@@ -0,0 +1,17 @@
+picture {
+  background-color: #ddd;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+picture img {
+  z-index: 1;
+}
+
+picture svg {
+  position: absolute;
+  opacity: 1;
+  transition: var(--transition-image-opacity);
+  z-index: 0;
+}

assets/css/src/variables.css

@@ -2,6 +2,7 @@
   --border: 1px solid #000;
 
   --font-size-body: 1.25rem;
+  --font-size-h4: 1.5625rem;
   --font-size-h3: 1.5625rem;
   --font-size-h2: 1.875rem;
   --font-size-h1: 2.8125rem;

assets/css/style.css

@@ -2,6 +2,7 @@
 @import url("src/variables.css");
 @import url("src/text.css");
 @import url("src/generic.css");
+@import url("src/vanilla.css");
 @import url("src/nav.css");
 @import url("src/hero.css");
 @import url("src/calendar-strip.css");