style: use grid

src/scss/_members.scss

@@ -1,9 +1,13 @@
 #profiles-list {
   display: block;
   sib-form {
-    background-color: #f3f3f3;
+    display: block;
+    margin: 3em 0;
+    input[type=reset]{
+      display: none;
     }
-  div[name=header]{
+  }
+  div[name='header'] {
     border-top: 2em solid $col-alt-bg;
     border-bottom: 1px solid $col-alt-bg;
     padding-bottom: 1em;
@@ -11,17 +15,50 @@
     text-align: center;
   }
   > div {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
+    grid-gap: 1em;
     label {
       display: none;
     }
     > sib-display {
-      flex: 1 1 220px;
-      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
       display: block;
-      margin-top: 40px;
-      margin: 0.5em;
+      position: relative;
+      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+      cursor: pointer;
+
+      &::before,
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        transform: scale3d(0, 0, 1);
+        transition: transform 0.3s ease-out 0s;
+        background: #eac1;
+        content: '';
+        pointer-events: none;
+        will-change: transform;
+      }
+
+      &::before {
+        transform-origin: left top;
+      }
+
+      &::after {
+        transform-origin: right bottom;
+
+        background: #ace1;
+      }
+
+      &:hover,
+      &:focus {
+        &::before,
+        &::after {
+          transform: scale3d(1, 1, 1);
+        }
+      }
     }
   }
   sib-display-img {
@@ -46,7 +83,8 @@
     display: block;
     font-weight: bold;
     margin: 0.5em;
-    ul,li{
+    ul,
+    li {
       display: block;
       margin: 0;
       padding: 0;
@@ -54,7 +92,7 @@
     }
   }
 
-  div[name=pseudonym]{
+  div[name='pseudonym'] {
     color: grey;
     font-size: 0.8em;
     div {
@@ -62,45 +100,3 @@
     }
   }
 }
-
-@media (min-width: $md-with) {
-  #profiles-list {
-
-    sib-display {
-      cursor: pointer;
-      position: relative;
-
-      &::before,
-      &::after {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        transform: scale3d(0, 0, 1);
-        transition: transform 0.3s ease-out 0s;
-        background: #eac1;
-        content: '';
-        pointer-events: none;
-      }
-
-      &::before {
-        transform-origin: left top;
-      }
-
-      &::after {
-        transform-origin: right bottom;
-
-        background: #ace1;
-      }
-
-      &:hover,
-      &:focus {
-        &::before,
-        &::after {
-          transform: scale3d(1, 1, 1);
-        }
-      }
-    }
-  }
-}