diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
index 90db608f05..9e0d4f28aa 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
@@ -15,7 +15,8 @@
       }
 
       .shop-variants {
-        padding-left: 7.9375rem;
+        // product-thumb width + 1rem
+        padding-left: calc(100% / 9 * 2 + 1rem);
 
         @include breakpoint(phablet) {
           padding-left: 0;
@@ -93,9 +94,14 @@
         }
 
         .summary-header {
-          padding-left: 7.9375rem;
+          // product-thumb width + 1rem
+          padding-left: calc(100% / 9 * 2 + 1rem);
           padding-right: 1rem;
 
+          @include breakpoint(phablet) {
+            padding-left: calc(100% / 12 * 4 + 1rem);
+          }
+
           .product-producer {
             white-space: nowrap;
             overflow: hidden;
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss b/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
index 2f53d36a45..bd44d50035 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
@@ -2,9 +2,16 @@
   products {
     product {
       .product-thumb {
-        width: 7rem;
-        height: 7rem;
+        // Desktop: the product summary is nine columns wide. Use two
+        // for the image. In our design, that's a max of 192px.
+        width: calc(100% / 9 * 2);
         float: left;
+
+        // Mobile: the summary has full twelve columns and the image
+        // should take four of them. Maximum is 227px.
+        @include breakpoint(phablet) {
+          width: calc(100% / 12 * 4);
+        }
       }
     }
   }