Connects items in each column vertically with a line

src/app/about-us/about-us.component.html

@@ -1,29 +1,42 @@
-<div class="about-us" fxLayout="row" [@scrollAnimation]="state" fxLayoutAlign="center start">
-  <div fxFlex="33.33%" class="title">
+<div class="about-us" gdColumns="1fr 2fr" [@scrollAnimation]="state" gdAlignRows="start stretch" gdAlignColumns="start stretch">
+  <div class="title">
     <h1 class="mat-display-1">About Us</h1>
     <h2 class="mat-display-3">What We Do</h2>
   </div>
 
-  <div fxFlex="67.67%" fxLayout="column" class="capabilities">
+  <div class="capabilities">
     <div
       *ngFor="let c of capabilities; let i = index"
-      [fxLayout]="i % 2 === 0 ? 'row' : 'row-reverse'"
-      [ngClass]="i % 2 === 0 ? 'even' : 'odd'"
-      fxLayoutAlign="start start"
+      gdColumns="3fr 1fr 1fr 3fr"
+      [ngClass]="isEven(i, 'even', 'odd')"
     >
-      <div class="details" fxFlex="37.5%">
+      <div class="details-left">
+        <ng-container *ngIf="isEven(i)">
           <h3>{{c.title}}</h3>
           <p>{{c.description}}</p>
+        </ng-container>
       </div>
 
-      <div class="icon" fxFlex="12.5%">
+      <div class="icon-left">
         <span
+          *ngIf="isEven(i)"
           [inlineSVG]="c.icon_url"
           class="capability-icon"
         ></span>
       </div>
-      <div class="icon-spacer" fxFlex="12.5%"></div>
-      <div class="details-spacer" fxFlex="37.5%"></div>
+      <div class="icon-right">
+        <span
+          *ngIf="!isEven(i)"
+          [inlineSVG]="c.icon_url"
+          class="capability-icon"
+        ></span>
+      </div>
+      <div class="details-right">
+        <ng-container *ngIf="!isEven(i)">
+          <h3>{{c.title}}</h3>
+          <p>{{c.description}}</p>
+        </ng-container>
+      </div>
     </div>
   </div>
 </div>

src/app/about-us/about-us.component.scss

@@ -21,6 +21,7 @@
 
   .capabilities {
     margin-top: 300px;
+    margin-left: 80px;
     margin-right: 80px;
 
     ::ng-deep .capability-icon svg {
@@ -28,45 +29,81 @@
       width: 128px;
       height: 128px;
     }
+
+    .icon-left,
+    .icon-right {
+      position: relative;
+      background-color: transparent;
+
+      &:after {
+        position: absolute;
+        left: 50%;
+        content: '';
+        width: 2px;
+      }
+    }
   }
 
   .even {
     text-align: right;
 
-    .details {
+    .details-left {
       background-color: transparent;
       h3 { color: $brand-primary-dark-1; }
     }
-    .icon {
-      background-color: transparent;
+    .icon-left {
       ::ng-deep .capability-icon svg path { fill: $brand-primary; }
-    }
-    .icon-spacer {
-      background-color: $brand-gray;
 
-      &::after {
-        content: '';
-        width: 1px;
-        height: 100%;
-        background-color: $brand-gray-light-4;
+      &:after {
+        bottom: 0;
+        height: calc(100% - 64px);
+        background-color: $brand-gray-light-3;
       }
     }
-    .details-spacer { background-color: $brand-gray; }
+    .icon-right {
+      &:after {
+        top: 0;
+        height: calc(100% - 40px);
+        background-color: $brand-gray-light-1;
+      }
+    }
+    .details-right { background-color: transparent; }
+
+    &:first-of-type .icon-right:after { background-color: transparent; }
+
+    &:last-of-type,
+    &:nth-last-of-type(2) {
+       .icon-left:after { background-color: transparent; }
+    }
   }
 
   .odd {
     text-align: left;
 
-    .details-spacer { background-color: transparent; }
-    .icon-spacer { background-color: transparent; }
-    .icon {
-      background-color: $brand-gray;
-      ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; }
+    .details-left { background-color: transparent; }
+    .icon-left {
+      &:after {
+        top: 0;
+        height: calc(100% - 40px);
+        background-color: $brand-gray-light-3;
       }
-    .details {
-      background-color: $brand-gray;
+    }
+    .icon-right {
+      ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; }
+
+      &:after {
+        bottom: 0;
+        height: calc(100% - 64px);
+        background-color: $brand-gray-light-1;
+      }
+    }
+    .details-right {
+      background-color: transparent;
       color: white;
       h3 { color: $brand-primary-light-2; }
     }
+
+    &:last-of-type .icon-right:after { background-color: transparent; }
+    &:last-of-type .icon-left:after { background-color: transparent; }
   }
 }

src/app/about-us/about-us.component.ts

@@ -51,4 +51,13 @@ export class AboutUsComponent implements OnInit {
     const scrollPosition = window.pageYOffset + hOffset;
     this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
   }
+
+  isEven(i: number, ifTrue?: string, ifFalse?: string): string | boolean {
+    const test = i % 2 === 0;
+    if (ifTrue && ifFalse) {
+      return test ? ifTrue : ifFalse;
+    } else {
+      return test;
+    }
+  }
 }