events-grid - set image to cover (calculate height)

assets/css/src/calendar-strip.css

@@ -1,11 +1,11 @@
 .calendar-strip {
+  --padding-vertical: calc(var(--space-m) / 2);
   position: relative;
   background-color: var(--color-yellow);
   box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
-  padding: 2rem var(--margin-body);
   border-top: var(--border);
   border-bottom: var(--border);
 }
@@ -43,7 +43,7 @@
   top: 100%;
   width: 100%;
   max-height: 0;
-  padding: 0 var(--margin-body);
+  padding: 0 calc(var(--space-m));
   background-color: #fff;
   z-index: 0;
   transition: max-height 0.3s ease-in-out;

assets/css/src/events-grid.css

@@ -1,9 +1,9 @@
 .events-grid {
-  padding: var(--space-m);
+  --padding-vertical: calc(var(--space-m) / 2);
 }
 
 .events-grid h4 {
-  margin-bottom: 1rem;
+  margin-bottom: calc(var(--space-m) / 2);
 }
 
 .event-card picture {

assets/css/src/generic.css

@@ -3,16 +3,28 @@ body.progress * {
 }
 
 .grid {
+  --column-gap: calc(var(--space-m) * 1.5);
+  --row-gap: calc(var(--space-m) / 2);
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  column-gap: var(--space-m);
-  row-gap: calc(var(--space-m) / 2);
+  column-gap: var(--column-gap);
+  row-gap: var(--row-gap);
 }
 
 .grid__item {
   grid-column: span var(--span);
 }
 
+.grid__item picture {
+  --white-space: calc(var(--column-gap) + var(--space-m) * 2);
+  --width: calc((100vw - var(--white-space)) / 2);
+  height: calc(var(--width) / 1.4);
+}
+
+.grid__item picture img {
+  object-fit: cover;
+}
+
 @keyframes vibrate {
   0%,
   100% {

assets/css/src/hero.css

@@ -1,7 +1,8 @@
 .hero {
+  --padding-vertical: calc(var(--space-m) / 1.5);
   display: grid;
   grid-template-columns: 2fr 3fr;
-  padding: 2.5rem;
+  column-gap: calc(var(--space-m) / 2);
 }
 
 .hero__text h2 {

assets/css/src/vanilla.css

@@ -1,3 +1,6 @@
+section {
+  padding: var(--padding-vertical) var(--space-m);
+}
 picture {
   background-color: #ddd;
   display: flex !important;

assets/css/src/variables.css

@@ -9,9 +9,7 @@
   --font-size-h1: 2.8125rem;
 
   --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-  --margin-body: 3.86rem;
-  --space-m: 2rem;
+  --space-m: 4vw;
 
   --color-pink: #ed268f;
   --color-pink-light: #ffa199;