Initial V1

V1/resources/css/components/follow.css

@@ -0,0 +1,89 @@
+.follow-container {
+    height: calc(100vh - 200px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10vmin;
+}
+
+.follow-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 5vmin;
+}
+
+.follow-title h1 {
+    font-family: 'Mona-Sans';
+    font-size: 8vmin;
+    font-weight: 700;
+    text-align: center;
+    color: #222;
+    margin: 0;
+}
+
+.follow-title h2 {
+    color: #222;
+    margin: 0;
+    font-family: 'Moonstone History';
+    font-size: 15vmin;
+    font-weight: 10;
+    line-height: 10vmin;
+}
+
+.follow-sub-container {
+    overflow: scroll;
+    border-top: 1px solid #D4D6D8;
+    border-bottom: 1px solid #D4D6D8;
+    height: 100%;
+    width: 100%;
+    padding: 2vmin;
+    margin-top: 5vmin;
+}
+
+.follow-sub-line {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    font-family: 'Overused Grotesk';
+    color:#222;
+    margin: 25px 2vmin;
+}
+
+.follow-sub-line-number {
+    grid-column: 1;
+    font-weight: 700;
+    font-size: 40px;
+}
+
+.follow-sub-line-tile {
+    grid-column: 2;
+    font-weight: 700;
+    font-size: 40px;
+}
+
+.follow-sub-line-text {
+    grid-column: 3;
+    font-weight: 100;
+    max-width: 90%;
+}
+
+.follow-sub-line svg {
+    grid-column: 4;
+}
+
+@media only screen and (max-width: 1200px) {
+    .follow-container {
+        height: auto;
+    }
+
+    .follow-sub-container {
+        height: auto;
+    }
+
+    .follow-sub-line {
+        grid-template-columns: repeat(3, 1fr);
+        margin: 25px 0px;
+    }
+}