Adjust icon margins on small screens

On these screens, sometimes the icons will be `$sdg-icon-min-width`
wide, but the margins were not taking this into account.

We can use CSS `max` function to set minimum margins just like we set
minimum width. However, there are two things to take into account:

* LibSass does not support these functions as it tries to use Sass own
  functionst at compile time, so we need to hack them writing `Max()`
  (which works in CSS because it is not case sensitive)
* Not all browsers support it (90% at the time of writing), so we write
  the rules twice (the first time for browsers not supporting it); we
  could use `@supports` but then we would have to overwrite some of the
  rules in the `.sdg-goals-index .sdg-goal-list` selector using
  `!important` or adding a `@supports` clause there as well

app/assets/stylesheets/mixins.scss

@@ -228,16 +228,24 @@
 }
 
 @mixin sdg-goal-list($spacing: 1ch) {
+  $min-spacing: $sdg-icon-min-width / 10;
+  $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
+
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin: -$spacing 0 $line-height / 3 -#{$spacing};
+  margin-left: calc(-1 * #{$max-spacing});
+  margin-top: calc(-1 * #{$max-spacing});
   width: calc(100% + #{$spacing});
+  width: calc(100% + #{$max-spacing});
 
   li {
     margin-bottom: 0;
     margin-left: $spacing;
+    margin-left: $max-spacing;
     margin-top: $spacing;
+    margin-top: $max-spacing;
   }
 }