styling submission details section on individual submission page

opentech/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -24,11 +24,26 @@
             </h6>
 
             <h3>Proposal Information</h3>
-            <div>
-                Requested Funding {{ object.value }}
-                Project Duration {{ object.value }}
-                Legal Name {{ object.full_name }}
-                Email {{ object.email }}
+            <div class="grid grid--proposal-info">
+                <div>
+                    <h5>Requested Funding</h5>
+                    <p>{{ object.value }}</p>
+                </div>
+
+                <div>
+                    <h5>Project Duration</h5>
+                    <p>{{ object.value }}</p>
+                </div>
+
+                <div>
+                    <h5>Legal Name</h5>
+                    <p>{{ object.full_name }}</p>
+                </div>
+
+                <div>
+                    <h5>Email</h5>
+                    <p>{{ object.email }}</p>
+                </div>
             </div>
             <div>
                 {{ object.render_answers }}

opentech/static_src/src/sass/apply/components/_grid.scss

+.grid {
+    display: flex;
+    flex-wrap: wrap;
+
+    > * {
+        flex-basis: calc(100% - 20px);
+        margin: 10px;
+
+        @media all and (min-width: 480px) {
+            flex-basis: calc(50% - 20px);
+        }
+
+        @media all and (min-width: 1024px) {
+            flex-basis: calc(30% - 20px);
+        }
+    }
+
+    &--two {
+        > * {
+            // fix for IE11 not rendering calc flex-basis correctly
+            flex-basis: auto;
+            width: calc(50% - 20px);
+        }
+    }
+
+    &--narrow {
+        text-align: center;
+
+        @include media-query(tablet-portrait) {
+            text-align: left;
+        }
+    }
+}
+
+@supports (display: grid) {
+    .grid {
+        display: grid;
+        margin: 30px 0;
+        grid-gap: 10px; // sass-lint:disable-line no-misspelled-properties
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+
+        > * {
+            flex-basis: initial;
+            width: auto;
+            margin: 0;
+        }
+
+        &--proposal-info {
+            margin: 0;
+            grid-template-columns: 100%;
+            grid-gap: 10px; // sass-lint:disable-line no-misspelled-properties
+
+
+            @include media-query(mob-landscape) {
+                grid-template-columns: 1fr 1fr;
+            }
+
+            @include media-query(tablet-portrait) {
+                padding-bottom: 30px;
+                border-bottom: 1px solid $color--mid-grey;
+            }
+
+            * {
+                margin: 0;
+            }
+        }
+    }
+}

opentech/static_src/src/sass/apply/components/_wrapper.scss

@@ -174,11 +174,9 @@
 
         > div:first-child {
             flex: 1;
-            margin-bottom: 20px;
 
             @include media-query(tablet-portrait) {
                 padding-right: 20px;
-                margin-bottom: 0;
             }
         }
     }

opentech/static_src/src/sass/apply/main.scss

@@ -12,6 +12,7 @@
 
 // Components
 @import 'components/button';
+@import 'components/grid';
 @import 'components/heading';
 @import 'components/icon';
 @import 'components/sidebar';