gistfile0.diff

diff --git a/assets/stylesheet.css b/assets/stylesheet.css
index cb0a5ee0..9e691b64 100755
--- a/assets/stylesheet.css
+++ b/assets/stylesheet.css
@@ -4088,6 +4088,7 @@ ul.collection__sidebar-menu li.js-parent-menu.open > .parent_item > a svg {
 }
 
 .sidebar-filter.filter--color .filter_swatch label {
+    margin-top: 5px;
     margin-bottom: 10px;
 }
 
@@ -4115,7 +4116,7 @@ ul.collection__sidebar-menu li.js-parent-menu.open > .parent_item > a svg {
   overflow: hidden;
   text-overflow: ellipsis;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
 }
 
@@ -4152,10 +4153,29 @@ ul.collection__sidebar-menu li.js-parent-menu.open > .parent_item > a svg {
     padding: 0 10px 0 0;
 }
 
+@media screen and (min-width: 1420px) {
+  .collection__sidebar-block .sidebar-filter ul.two_column_labels {
+      grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 @media screen and ( max-width: 740px) {
-.sidebar-filter.filter--color ul.two_column_labels {
-  grid-row-gap: 10px;
+  .sidebar-filter.filter--color ul.two_column_labels {
+    grid-row-gap: 10px;
+  }
 }
+
+@media (min-width: 981px) {
+  aside#slideout-collection-sidebar .collection__sidebar-block .sidebar-filter ul.two_column_labels {
+    grid-template-columns: repeat(5, 1fr) !important;
+    grid-gap: 10px;
+  }
+}
+@media (max-width: 980px) {
+  aside#slideout-collection-sidebar .collection__sidebar-block .sidebar-filter ul.two_column_labels {
+    grid-template-columns: repeat(4, 1fr) !important;
+    grid-gap: 10px;
+  }
 }
 
 @-moz-document url-prefix() {
@@ -13414,4 +13434,4 @@ p.countdown__time {
   .collection--list_submenus .collection__list-item {
     flex: 0 0 calc(100% / 3);
   }
-}
\ No newline at end of file
+}
diff --git a/snippets/collection-horizontal-toolbar.liquid b/snippets/collection-horizontal-toolbar.liquid
index 0f37c6cc..68d2b23c 100644
--- a/snippets/collection-horizontal-toolbar.liquid
+++ b/snippets/collection-horizontal-toolbar.liquid
@@ -195,7 +195,7 @@
                               {% when 'colors' %}
                                 <div class="{{- classes -}}" style="background: conic-gradient({{ conic_gradient }}); transform: rotateZ({{ rotation }});"></div>
                               {% when 'image' %}
-                                {{ value.display.value | image_url: width: 300 | image_tag: alt: value.display.value.alt, class: classes }}
+                                {{ value.display.value | image_url: width: 300, height: 300 | image_tag: alt: value.display.value.alt, class: classes }}
                             {% endcase %}
                           {% else %}
                             <span class="color-filter color-filter--rounded color-filter--{{ status }} {{ status }}" style="{{ bg_color }}{{ bg_img }}"></span>
diff --git a/snippets/css-variables.liquid b/snippets/css-variables.liquid
index 54e938a1..8d23225f 100644
--- a/snippets/css-variables.liquid
+++ b/snippets/css-variables.liquid
@@ -91,7 +91,7 @@
     --details-align: {{ settings.details_align }};
     --select-arrow-bg: url({{ 'select-arrow.png' | asset_url }});
     --icon-border-color: {{ settings.text_color | color_lighten: 90 }};
-    --color-filter-size: 18px;
+    --color-filter-size: 42px;
     --disabled-text: {{ settings.text_color | color_lighten: 50 }};
     --listing-size-color: {{ settings.text_color | color_lighten: 40 }};
 
diff --git a/snippets/sidebar-list-filter.liquid b/snippets/sidebar-list-filter.liquid
index 4328cbb0..0239529c 100644
--- a/snippets/sidebar-list-filter.liquid
+++ b/snippets/sidebar-list-filter.liquid
@@ -166,7 +166,7 @@ Usage:
                   {% when 'colors' %}
                     <div class="{{- classes -}}" style="background: conic-gradient({{ conic_gradient }}); transform: rotateZ({{ rotation }});"></div>
                   {% when 'image' %}
-                    {{ value.display.value | image_url: width: 300 | image_tag: alt: value.display.value.alt, class: classes }}
+                    {{ value.display.value | image_url: width: 300, height: 300 | image_tag: alt: value.display.value.alt, class: classes }}
                 {% endcase %}
               {% else %}
                 <span class="color-filter color-filter--rounded color-filter--{{ status }} {{ status }}" style="{{ bg_color }}{{ bg_img }}"></span>