src/app/projects/projects.component.css

@@ -1,6 +1,28 @@
-@media (max-width: 768px) {
+.grid {
-  img {
+  display: grid;
-    max-width: 40%;
+  grid-gap: 1em;
-    margin: 0 0 1em 0;
+  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr) );
+  align-content: start;
+  margin: 1rem;
+}
+
+:host /deep/ a {
+  color: var(--nord13);
+}
+
+:host /deep/ a:hover {
+  color: var(--nord11);
+  -webkit-transition: color 300ms;
+  -moz-transition: color 300ms;
+  -ms-transition: color 300ms;
+  -o-transition: color 300ms;
+  transition: color 300ms;
+  text-decoration: none;
+}
+
+@media(max-width: 576px) {
+  .grid {
+    grid-template-columns: 1fr;
+    margin: 0.5rem;
   }
 }

src/app/projects/projects.component.html

@@ -1,9 +1,11 @@
-<div class="row">
+<div class="row dark-bg h-100">
-  <div class="col col-lg-6 col-md-9 text-center mx-auto mt-5">
+  <div class="grid">
-    <div class="mb-5" *ngFor="let project of projects">
+    <div *ngFor="let project of projects"
+      class="text-center shadow d-flex flex-column justify-content-around p-3 h-100"
+      style="background-color: var(--nord1)">
+      <img *ngIf="project.imgLocation" src={{project.imgLocation}} class="mx-auto mb-3 w-25" alt="{{project.title}} icon">
       <h4>{{project.title}}</h4>
-      <img *ngIf="project.imgLocation" src={{project.imgLocation}} class="w-25" alt="{{project.title}} icon">
+      <span class="subtitle">{{project.applicationType}}</span>
-      <p class="subtitle" style="margin: 0">{{project.applicationType}}</p>
       <p class="thin-subtitle" [innerHTML]="project.description | projectKeyword"></p>
     </div>
   </div>

src/styles.css

@@ -21,7 +21,7 @@ html, body {
   background-color: var(--nord0);
 }
 
-.dark-bg span, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg p {
+.dark-bg span, .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg p {
   color: var(--nord4);
 }