Previous version made GPDR-friendly

src/scss/components/_member-list.scss

@@ -0,0 +1,96 @@
+.member-list {
+  &__heading {
+    margin: 8rem 0 4rem;
+  }
+  
+  &__items {
+    margin-top: 4rem;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto;
+    grid-column-gap: 2rem;
+    grid-row-gap: 4rem;
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--color-dark);
+
+    > p {
+      text-align: center;
+    }
+
+    > .btn {
+      text-align: center;
+    }
+
+    > a {
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+    }
+    
+    img {
+      border-radius: 50%;
+      height: auto;
+      width: 100%;
+      padding: 0 1rem;
+
+      + .btn {
+        margin-top: -1.5rem;
+        margin-bottom: .5rem;
+        text-align: center;
+        align-self: center;
+
+        + p {
+          font-size: 1.125rem;
+        }
+      }
+    }
+
+    &.info {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--color-white);
+      color: var(--color-dark);
+      font-weight: 600;
+
+      p {
+        font-size: 1.2rem;
+        text-align: center;
+        margin: 2rem 0 3.125rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .member-list {
+    &__heading {
+      margin: 4rem 0;
+      font-size: 1.75rem;
+    }
+  }
+}
+
+@media (max-width: 991.98px) {
+  .member-list {
+    &__items {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+
+@media (max-width: 575.98px) {
+  .member-list {
+    &__items {
+      display: block;
+    }
+
+    &__item + &__item {
+      margin-top: 3rem;
+    }
+  }
+}