layout for list accompanying work

src/Bundle/ChillPersonBundle/Resources/public/modules/accompanying_course_work_list/index.scss

@@ -2,16 +2,19 @@
 #accompanying_course_work_list {
 
   .item {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    border: 1px solid gray;
 
     .title_label {
       display: block;
       margin: 0;
 
-      font-size: 0.8rem;
-    }
+      font-variant-caps: small-caps;
 
-    h2.action_title {
-      margin-top: 0;
+      + * {
+        margin-top: 0;
+      }
     }
 
     .objective_results {
@@ -19,8 +22,10 @@
       grid-template-areas:
         "obj res"
         ;
-      grid-columns: 50%;
+      grid-template-columns: 50%;
       column-gap: 1rem;
+      
+      padding: 0.3rem;
 
       .obj {
         grid-area: obj;
@@ -28,8 +33,64 @@
 
       .res {
         grid-area: res;
+
+        ul.result_list {
+          list-style-type: none;
+          padding: 0;
+        }
       }
     }
+
+    .objective_results:nth-child(2n+2) {
+      background-color: var(--chill-llight-gray);
+    }
   }
 
+  .updatedBy {
+    margin-top: 1rem;
+    text-align: right;
+    font-size: 0.8rem;
+    font-style: italic;
+  }
+}
+
+ul.timeline {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  list-style-type: none;
+
+  > li {
+    min-width: 210px;
+
+    div.date {
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    div.label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      padding: 0 40px;
+      border-top: 2px solid var(--chill-green);
+
+      &:before {
+        content: '';
+        display: inline-block;
+        position: relative;
+        width: 25px;
+        height: 25px;
+        
+        background-color: white;
+        border-radius: 25px;
+        border: 1px solid #ddd;
+        
+        top: -15px;
+      }
+    }
+  }
 }