(ISSUE-9353) Fix pinned item alignment (#9358)

* (ISSUE-9353) Fix pinned item alignment
- Get rid of justify-content: space-between to allow flex-start default to be used
- Add margin to direct children (item-wrappers)

* Issue-9353: Change selector to & > div instead of just > for more explicit selection of direct child divs

* Fix rewards item spacing to match Zeplin mockups
- Make sure horizontal/vertical spacing between items is 16px
- Add use of grid if supported, else use flex

website/client/components/tasks/column.vue

@@ -79,9 +79,20 @@
 
 
   .reward-items {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    @supports (display: grid) {
+      display: grid;
+      grid-column-gap: 16px;
+      grid-row-gap: 4px;
+      grid-template-columns: repeat(auto-fill, 94px);
+    }
+
+    @supports not (display: grid) {
+      display: flex;
+      flex-wrap: wrap;
+      & > div {
+      margin: 0 16px 4px 0;
+      }
+    }
   }
 
   .tasks-list {