Adjust different paddings and margins to make mobile product modal contents similar to required design

app/assets/javascripts/templates/product_modal.html.haml

@@ -10,7 +10,7 @@
     .filter-shopfront.property-selectors.inline-block
       %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }
 
-    %div{"ng-if" => "product.description_html"}
+    .product-description{"ng-if" => "product.description_html"}
       %p.text-small{"ng-bind-html" => "::product.description_html"}
 
   .columns.small-12.large-6

app/assets/stylesheets/darkswarm/_shop-modals.css.scss

@@ -1,15 +1,21 @@
 .product-header {
+  padding-left: 1.5rem;
+
   h1, h2, h3, h4, h5, h6 {
-    margin: 0;
+    margin: 0.2rem 0 0 0;
   }
 
   span {
     color: $grey-500;
   }
 
+  .product-description {
+    margin: 1rem 0.25rem 0.25rem 0;
+  }
+
   .property-selectors li {
     margin: 0 0.25rem 0.25rem 0;
-    padding: 0.4rem 0 1.1rem 0;
+    padding: 0.4rem 0 0 0;
 
     a {
       border: 1px solid $grey-300;

app/assets/stylesheets/darkswarm/images.css.scss

@@ -14,6 +14,12 @@
       display: none;
     }
   }
+
+  @media only screen and (max-width: 1024px) {
+    margin-top: 0;
+    margin-bottom: 1em;
+    padding: 5px;
+  }
 }
 
 .hero-img {
@@ -46,10 +52,3 @@
 .producer-logo {
   max-width: 220px;
 }
-
-@media only screen and (max-width: 1024px) {
-  .product-img {
-    margin-top: 2em;
-    margin-bottom: 1em;
-  }
-}

app/assets/stylesheets/darkswarm/modals.css.scss

@@ -5,8 +5,6 @@ dialog
 , .reveal-modal {
   border: none;
   outline: none;
-  padding: 30px 20px 0 20px;
-  border-bottom: 30px solid white;
   overflow-y: scroll;
   overflow-x: hidden;
   min-height: 260px;
@@ -23,12 +21,15 @@ dialog
     left: 4%;
     max-height: 92%;
     max-width: 92%;
+    padding: 15px 0 0 0;
     top: 4%;
   }
 
   // Medium and up - larger outside area
   @media only screen and (min-width: 641px) {
+    border-bottom: 30px solid white;
     max-height: 90%;
+    padding: 30px 20px 0 20px;
     top: 5%;
   }
 }
@@ -78,6 +79,7 @@ dialog .mobile-close-reveal-modal
 
   .bottom-close-button {
     background-color: $orange-500;
+    margin: 0 0 1rem;
 
     @media only screen and (min-width: 640px) {
       display: none;