footer - dynamize infos

assets/css/src/calendar-strip.css

@@ -55,7 +55,7 @@
 }
 
 .calendar-strip__sessions {
-  padding: 2rem 0;
+  padding: var(--padding-vertical) 0;
 }
 
 .calendar-strip__session {

assets/css/src/callout.css

@@ -9,7 +9,7 @@ section.callout {
 }
 
 section.callout h4 {
-  margin-bottom: 2rem;
+  margin-bottom: calc(var(--padding-vertical) / 2);
 }
 
 section.callout a {

assets/css/src/footer.css

@@ -1,9 +1,36 @@
 .main-footer {
+  --padding-vertical: var(--space-m);
   background-color: var(--color-yellow-fluo);
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 0.5fr 1fr 1fr 1fr;
+  column-gap: calc(var(--space-m));
 }
 
 .main-footer p {
   margin-bottom: 1rem;
 }
+
+.main-footer .social-icons {
+  display: flex;
+  column-gap: 1.15rem;
+  margin-bottom: 2rem;
+}
+
+.main-footer form input {
+  width: 100%;
+  border-bottom: var(--border);
+  padding-bottom: 0.5rem;
+}
+
+.main-footer form input::after {
+  content: "→";
+}
+
+.main-footer .social-icons a svg {
+  transform: scale(1);
+  transition: transform 0.2s ease-in-out;
+}
+
+.main-footer .social-icons a:hover svg {
+  transform: scale(1.15);
+}

assets/css/src/hero.css

@@ -9,7 +9,7 @@
   font-size: var(--font-size-h1);
   width: 100%;
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: var(--padding-vertical);
 }
 
 .hero__text h3 {
@@ -21,5 +21,5 @@
 }
 
 .hero__text p:first-of-type {
-  margin-top: 2rem;
+  margin-top: var(--padding-vertical);
 }