Grid logo and title is centered using grid layout

src/app/header/header.component.scss

@@ -1,33 +1,80 @@
-@keyframes heartbeat
-{
-  0%
-  {
-    transform: scale( .75 );
-  }
-  20%
-  {
-    transform: scale( 1 );
-  }
-  40%
-  {
-    transform: scale( .75 );
-  }
-  60%
-  {
-    transform: scale( 1 );
-  }
-  80%
-  {
-    transform: scale( .75 );
-  }
-  100%
-  {
-    transform: scale( .75 );
-  }
+// Variables
+
+//
+// Spaces
+//
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+//
+// Misc
+//
+$tao-blue-500: #277EEC;
+$font-size-base: 14px;
+$font-size-h4: floor(($font-size-base * 1.2));
+
+$tao-navbar-height: 67px;
+
+
+//
+// Classes
+//
+.tao-header-title {
+  color: $tao-blue-500;
+  font-size: $font-size-h4;
 }
 
-.logo {
-  animation: heartbeat 1s infinite;
+.tao-navbar {
+  background-color: rgba(255, 255, 255, 0.96);
+  min-height: $tao-navbar-height;
+  box-shadow: 0px 1px 6px 0px #888;
+  margin-bottom: 12px;
+  border: 1px solid #e7e7e7;
+}
+
+.tao-grid-navbar {
+  display: grid;
+  grid-template-columns: 10fr 1fr 10fr;
+  grid-column-gap: 8px;
+  width: 100%;
+}
+
+.tao-company-logo {
+  display: block;
+  width: 130px;
+}
+
+.tao-company-logo-mobile {
+  display: none;
+  width: 130px;
+}
+
+@media (max-width: 767px) {
+  .tao-grid-navbar {
+    grid-template-columns: 1fr;
+  }
+
+  .tao-company-logo {
+    display: none;
+  }
+
+  .tao-company-logo-mobile {
+    display: block;
+  }
+
+  .tao-navbar-links {
+    justify-self: left !important;
+  }
 }
 
 .jumbotron {