1 files changed, 81 insertions, 0 deletions
diff --git a/assets/scss/web/_work.scss b/assets/scss/web/_work.scss
new file mode 100644
index 0000000..958859e
--- /dev/null
+++ b/assets/scss/web/_work.scss
@@ -0,0 +1,81 @@
+.work {
+}
+
+.work__header {
+}
+
+.work__experience {
+}
+
+.work__experience {
+  &:after {
+    display: flex;
+    content: "";
+    border-bottom: 1px solid;
+    margin: auto;
+    max-width: 30%;
+  }
+  &:last-of-type:after {
+    // remove the extra horizontal line after the last work__experience
+    display: none;
+  }
+}
+
+.job-position {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  @media screen and (max-width: 780px) {
+    flex-flow: column wrap;
+  }
+}
+
+.job-position__company,
+.job-position__title,
+.job-position__duration,
+.job-position__location {
+  min-width: 50%;
+}
+
+.job-position__company {
+  order: 0;
+  margin-bottom: 0;
+  font-size: 1.4em;
+}
+
+.job-position__title {
+  order: 2;
+  @media screen and (max-width: 780px) {
+    order: 1;
+  }
+}
+
+.job-position__duration {
+  order: 1;
+  text-align: right;
+  align-self: flex-end;
+  @media screen and (max-width: 780px) {
+    order: 2;
+    text-align: left;
+    align-self: flex-start;
+  }
+}
+
+.job-position__location {
+  order: 3;
+  text-align: right;
+  align-self: flex-end;
+  @media screen and (max-width: 780px) {
+    text-align: left;
+    align-self: flex-start;
+  }
+}
+
+.note {
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
+}
+
+.tasks {
+  margin-top: 0.4em;
+}