diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
index 9e0d4f28aa..82ff075a32 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
@@ -16,7 +16,7 @@
 
       .shop-variants {
         // product-thumb width + 1rem
-        padding-left: calc(100% / 9 * 2 + 1rem);
+        padding-left: calc(22.222% + 1rem);
 
         @include breakpoint(phablet) {
           padding-left: 0;
@@ -95,11 +95,11 @@
 
         .summary-header {
           // product-thumb width + 1rem
-          padding-left: calc(100% / 9 * 2 + 1rem);
+          padding-left: calc(22.222% + 1rem);
           padding-right: 1rem;
 
           @include breakpoint(phablet) {
-            padding-left: calc(100% / 12 * 4 + 1rem);
+            padding-left: calc(33.333% + 1rem);
           }
 
           .product-producer {
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss b/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
index bd44d50035..6b7daae559 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
@@ -3,14 +3,14 @@
     product {
       .product-thumb {
         // 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);
+        // for the image. 100% / 9 * 2 = 22.222% <= 192px
+        width: calc(22.222%);
         float: left;
 
         // Mobile: the summary has full twelve columns and the image
-        // should take four of them. Maximum is 227px.
+        // should take four of them. 100% / 12 * 4 = 33.333% <= 227px
         @include breakpoint(phablet) {
-          width: calc(100% / 12 * 4);
+          width: calc(33.333%);
         }
       }
     }