style landing page modules and start reorganising css

assets/stylesheets/landing-page/index.css

@@ -0,0 +1 @@
+@import './modules';

assets/stylesheets/landing-page/modules/hero-image.css

@@ -0,0 +1,32 @@
+@block module-hero-image {
+  @element wrapper {
+    position: relative;
+    overflow: hidden;
+    max-height: 60vh;
+    border-radius: var(--border-radius);
+  }
+
+  @element image{
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  @element headline-wrapper {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @element headline {
+    color: #fff;
+    text-align: center;
+    font-size: 4.5vw;
+    text-shadow: 0px 3px 0px #b2a98f,
+                 0px 14px 10px rgba(0,0,0,0.15),
+                 0px 24px 2px rgba(0,0,0,0.1),
+                 0px 34px 30px rgba(0,0,0,0.1);
+  }
+}

assets/stylesheets/landing-page/modules/highlighted-course.css

@@ -0,0 +1,98 @@
+@block module-higlighted-course {
+  @element wrapper {
+    position: relative;
+    overflow: hidden;
+    max-height: 60vh;
+    border-radius: var(--border-radius);
+  }
+
+  @element image {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  @element overlay {
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0.8;
+    border-radius: 4px;
+    background-color: #3c3d41;
+  }
+
+  @element content {
+    z-index: 2;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+
+    display: flex;
+    flex-direction: column;
+
+    padding: var(--grid-gutter) calc(var(--grid-gutter) * 2);
+
+    color: var(--color-text-dark-bg-grey);
+  }
+
+  @element categories {
+    flex: 0 0 var(--line-height);
+  }
+
+  @element category {
+    display: inline-block;
+    margin-right: var(--grid-gutter);
+
+    font-size: 0.75em;
+    letter-spacing: 2px;
+  }
+
+  @element title {
+    flex: 1 1 auto;
+    margin: 0;
+
+    color: var(--color-text-dark-bg);
+    font-size: 4vw;
+    line-height: 1.3;
+
+    @media (--breakpoint-desktop) {
+      font-size: 3.25em;
+    }
+  }
+
+  @element description-wrapper {
+    flex: 1 1 auto;
+    max-width: 400px;
+    line-height: 1.3;
+
+    @media (--breakpoint-desktop) {
+      font-size: 1.25em;
+    }
+
+    & p {
+      margin: 0;
+    }
+  }
+
+  @element link-wrapper {
+    flex: 0 0 auto;
+    margin-top: var(--grid-gutter);
+  }
+
+  @element link {
+    display: inline-block;
+
+    border-bottom: 1px solid var(--color-text-dark-bg);
+
+    text-transform: uppercase;
+    color: var(--color-text-dark-bg);
+    font-size: 0.75em;
+    line-height: 2.17;
+    letter-spacing: 2px;
+  }
+}

assets/stylesheets/landing-page/modules/index.css

@@ -0,0 +1,17 @@
+@import './hero-image';
+@import './highlighted-course';
+
+@block module {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  padding: 0 2vw;
+
+  & img {
+    width: 100%;
+    height: auto;
+  }
+
+  & + .module {
+    margin-top: var(--grid-gutter);
+  }
+}