Avoid horizontal scrolling in participation feeds

The elements were given a minimum width of `rem-calc(240)` (that is,
15rem). Considering one element is double the width of the other one,
that means that in screens between 40rem and 45rem there would be a
horizontal scrollbar.

Adding a `flex-wrap: wrap` property fixes the problem. We're also using
`flex-basis` to guarantee a minimum width and make one element be double
the size of the other one when they're on the same line. No need to add
breakpoint rules due.

Finally, we're adding an artifitial gap between flex elements so we can
remove the `@include grid-col` rules.

app/assets/stylesheets/layout.scss

@@ -2603,7 +2603,6 @@ table {
       display: inline-block;
       border-top: 4px solid $brand;
       margin-bottom: 0;
-      min-width: rem-calc(240);
       padding: $line-height / 2 0;
     }
   }

app/assets/stylesheets/widgets/feeds/participation.scss

@@ -1,34 +1,33 @@
 .feeds-participation {
+  $gap: rem-calc(map-get($grid-column-gutter, medium));
+  @include grid-column-gutter;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$gap;
 
-  @include breakpoint(medium) {
+  .feed-proposals {
+    flex-basis: rem-calc(480);
+    flex-grow: 2;
+  }
+
+  .feed-debates {
+    flex-basis: rem-calc(240);
+    flex-grow: 1;
+  }
+
+  .feed-proposals,
+  .feed-debates {
     display: flex;
+    margin-left: $gap;
+    margin-top: $line-height;
+    flex-direction: column;
 
-    .feed-proposals:not(:only-child) {
-      width: 2 * 100% / 3;
-    }
-
-    .feed-debates:not(:only-child) {
-      width: 1 * 100% / 3;
-    }
-
-    .feed-proposals,
-    .feed-debates {
-      display: flex;
-      flex-direction: column;
-
-      .feed-content {
-        flex-grow: 1;
-      }
+    .feed-content {
+      flex-grow: 1;
     }
   }
 
   .sdg-tag-list {
     margin-top: $line-height / 2;
   }
-
-  .feed-debates,
-  .feed-proposals {
-    @include grid-col;
-    margin-top: $line-height;
-  }
 }