finish newsletter style

assets/css/src/newsletter.css

@@ -0,0 +1,44 @@
+section.newsletter {
+  --padding-vertical: var(--space-m);
+  background-color: var(--color-brown-light);
+  border-top: var(--border);
+  border-bottom: var(--border);
+}
+
+section.newsletter h2 {
+  margin-bottom: calc(var(--space-m) / 2);
+}
+
+section.newsletter {
+  --space-vertical: 0.4rem;
+}
+
+section.newsletter form {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+}
+
+section.newsletter form > *:last-child {
+  justify-self: end;
+}
+
+section.newsletter form input {
+  border-bottom: 1px solid #000;
+  padding-bottom: var(--space-vertical);
+  width: 100%;
+}
+
+section.newsletter form button[type="submit"] {
+  margin-top: var(--space-vertical);
+}
+
+section.newsletter form button[type="submit"]::before {
+  content: "→";
+  position: absolute;
+  transform: translateX(-1.5rem);
+  transition: transform 0.35s ease-in-out;
+}
+
+section.newsletter form button[type="submit"]:hover::before {
+  transform: translateX(-2.5rem);
+}