Migrate to Next

components/Header.module.css

@@ -0,0 +1,68 @@
+.block {
+  position: relative;
+  display: flex;
+  height: 50vh;
+  min-height: 280px;
+  color: var(--color-white);
+}
+
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: var(--page-max-width);
+  padding: var(--spacing-sm);
+  text-align: center;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.light {
+  color: var(--color-black);
+}
+
+.br {
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  transform: none;
+}
+/*
+const Content = styled.div`
+  position: absolute;
+  ${(props) =>
+    props.posY !== "bottom" &&
+    css`
+      top: ${props.posY === "top" ? 0 : "50%"};
+    `}
+  ${(props) =>
+    props.posY === "bottom" &&
+    css`
+      bottom: 0;
+    `}
+  ${(props) =>
+    props.posX !== "right" &&
+    css`
+      left: ${props.posX === "left" ? 0 : "50%"};
+    `}
+  ${(props) =>
+    props.posX === "right" &&
+    css`
+      right: 0;
+    `}
+  transform: translate(
+    ${(props) => (props.posX === "middle" ? "-50%" : 0)},
+    ${(props) => (props.posY === "middle" ? "-50%" : 0)}
+  );
+  max-width: var(--page-max-width);
+  padding: var(--spacing-y-sm) var(--spacing-x-sm);
+  text-align: center;
+`;
+
+const Map = styled.div``;
+*/