Improve responsive, initial new heading description

Author: marcoacierno

src/components/events-slider/index.css

@@ -8,34 +8,35 @@
     font-family: var(--font-name--marana);
     color: var(--white);
     opacity: 1;
-    font-size: 9.4rem;
+    font-size: 4.7rem;
     letter-spacing: -0.079em;
     cursor: pointer;
+
+    @media (--tablet) {
+      font-size: 9.4rem;
+    }
   }
 
   &--description {
-    margin-top: 2rem;
-    text-align: center;
+    display: block;
+    color: var(--white);
+    font-size: 2rem;
 
+    text-align: center;
     transform: translateZ(0);
+    margin: 0 3rem;
 
-    li,
-    a {
-      color: var(--white);
+    @media (--tablet) {
+      margin: 0;
+      font-size: 3rem;
     }
 
-    li {
-      overflow: hidden;
-
-      span {
-        display: inline-block;
-        transition: transform 0.25s;
-      }
-    }
+    span {
+      font-family: var(--font-name--marana);
+      font-size: 2.5rem;
 
-    &.out {
-      li span {
-        transform: translateY(-100%) translateZ(0);
+      @media (--tablet) {
+        font-size: 4rem;
       }
     }
   }

src/components/events-slider/index.js

@@ -27,27 +27,14 @@ export default props => {
   return (
     <div className="EventsSlider">
       <div className="EventsSlider--item">{event.city}</div>
-      <div className="EventsSlider--description">
-        <ul>
-          <li>
-            <span>
-              <strong>Where?</strong>
-              {event.where}
-            </span>
-          </li>
-          <li>
-            <span>
-              <strong>When?</strong>
-              {event.date}
-            </span>
-          </li>
-          <li>
-            <span>
-              <a href={event.site}>Find out more here!</a>
-            </span>
-          </li>
-        </ul>
-      </div>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={event.site}
+        className="EventsSlider--description"
+      >
+        See you in <span>{event.city}</span> the <span>{event.date}</span>!
+      </a>
     </div>
   );
 };

src/components/form/index.css

@@ -84,7 +84,8 @@
       appearance: none;
       transition: opacity 0.3s;
 
-      &:hover {
+      &:hover,
+      &:focus {
         opacity: 0.8;
       }
     }

src/components/form/index.js

@@ -19,6 +19,7 @@ export default props => {
   const onChangeEmail = useCallback(e => setEmail(e.target.value), []);
   const onChangeMessage = useCallback(e => setMessage(e.target.value), []);
   const onChangeCity = useCallback(e => setCity(e.target.value), []);
+
   const onSubmit = useCallback(
     async e => {
       e.preventDefault();
@@ -52,7 +53,7 @@ export default props => {
         value={name}
         onChange={onChangeName}
         required
-        label="Name"
+        label="Name*"
       />
 
       <Input
@@ -61,7 +62,7 @@ export default props => {
         value={email}
         onChange={onChangeEmail}
         required
-        label="Email"
+        label="Email*"
       />
 
       <Input
@@ -70,14 +71,15 @@ export default props => {
         value={city}
         onChange={onChangeCity}
         required
-        label="City"
+        label="City*"
       />
 
       <Input
+        required
         component="textarea"
         value={message}
         onChange={onChangeMessage}
-        label="Messge"
+        label="Messge*"
       />
 
       <div className="Form--submit-container">

src/components/header/index.css

@@ -40,12 +40,12 @@
     }
 
     li {
-      font-family: var(--font-name--paragraph);
       font-weight: 700;
 
       a {
         display: block;
         padding: 0.4rem;
+        font-family: var(--font-name--paragraph);
         color: var(--white);
         user-select: none;
         background: linear-gradient(