Use multiplications instead of divisions in Sass variables

In the previous commit, we used the `calc` function when assiging CSS
properties in order to avoid warnings like:

```
Deprecation Warning: Using / for division outside of calc() is
deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($global-width, 2) or calc($global-width / 2)
```

In cases like dividing by two, there's a third alternative: multiplying
by 0.5. We're applying this principle to all variable assignments where
we were using divisions, since using the `calc` function here would
sometimes result in errors due to these variables being used in
arithmetical operations. We aren't using `math.div` because it makes the
code harder to read.

app/assets/stylesheets/_consul_settings.scss

@@ -53,8 +53,8 @@ $show-header-for-stacked: true !default;
 // 2. CONSUL DEMOCRACY variables
 // -----------------------------
 
-$body-margin: calc(50vw - #{$global-width / 2}) !default;
-$full-width-margin: unquote("#{$global-width / 2} - 50vw") !default;
+$body-margin: calc(50vw - #{$global-width * 0.5}) !default;
+$full-width-margin: unquote("#{$global-width * 0.5} - 50vw") !default;
 
 $base-font-size:      rem-calc(17) !default;
 $base-line:           rem-calc(26) !default;
@@ -160,7 +160,7 @@ $anchor-color-hover: darken($anchor-color, 20%) !default;
 $tab-background-active: $white !default;
 
 $tab-item-font-size: $base-font-size !default;
-$tab-item-padding: $line-height / 2  0 !default;
+$tab-item-padding: $line-height * 0.5  0 !default;
 $tab-content-border: $border !default;
 
 $tooltip-background-color: $brand !default;

app/assets/stylesheets/_settings.scss

@@ -436,7 +436,7 @@ $input-background-focus: $white !default;
 $input-background-disabled: $light-gray !default;
 $input-border: 1px solid $medium-gray !default;
 $input-border-focus: 1px solid $dark-gray !default;
-$input-padding: $form-spacing / 2 !default;
+$input-padding: $form-spacing * 0.5 !default;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
 $input-shadow-focus: 0 0 5px $medium-gray !default;
 $input-cursor-disabled: not-allowed !default;
@@ -778,7 +778,7 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
 $table-is-striped: true !default;
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
 $table-stripe: even !default;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default;
 $table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
 $table-foot-background: smart-scale($table-background, $table-color-scale) !default;
 $table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;

app/assets/stylesheets/admin/budgets/actions.scss

@@ -1,7 +1,7 @@
 .admin .budgets-actions {
   > * {
     $gap: $line-height;
-    $vertical-gap: $line-height / 2;
+    $vertical-gap: $line-height * 0.5;
     @include flex-with-gap($gap);
     align-items: center;
     flex-wrap: wrap;

app/assets/stylesheets/admin/budgets/drafting.scss

@@ -1,6 +1,6 @@
 .admin .drafting {
   $vertical-gap: nth($callout-margin, 3);
-  @include flex-with-gap($line-height / 2);
+  @include flex-with-gap($line-height * 0.5);
   align-items: flex-start;
   flex-wrap: wrap;
   margin-bottom: $line-height * 1.5;

app/assets/stylesheets/admin/budgets/help.scss

@@ -1,7 +1,7 @@
 .admin .budgets-help {
-  $padding: $line-height / 2;
+  $padding: $line-height * 0.5;
   $quote-size: 1em;
-  $quote-padding: 2 * $quote-size / 5;
+  $quote-padding: $quote-size * 0.4;
   $quote-width: $quote-size + 2 * $quote-padding;
 
   @include has-fa-icon(quote-right, solid, after);

app/assets/stylesheets/budgets/ballot/investment.scss

@@ -1,5 +1,5 @@
 .ballot-list li {
-  $side-padding: $line-height / 2;
+  $side-padding: $line-height * 0.5;
   $close-icon-size: rem-calc(20);
   $close-icon-margin: rem-calc(6);
 

app/assets/stylesheets/budgets/groups_and_headings.scss

@@ -1,5 +1,5 @@
 .public .groups-and-headings {
-  $spacing: $line-height / 2;
+  $spacing: $line-height * 0.5;
 
   .headings-list {
     @include flex-with-gap($spacing);

app/assets/stylesheets/in_favor_against.scss

@@ -1,8 +1,8 @@
 .in-favor-against {
-  @include flex-with-gap($line-height / 4);
+  @include flex-with-gap($line-height * 0.25);
 
   @include breakpoint(medium) {
-    @include flex-with-gap($line-height * 3 / 4);
+    @include flex-with-gap($line-height * 0.75);
   }
 
   &,

app/assets/stylesheets/mixins/forms.scss

@@ -22,7 +22,7 @@
     $icon-size: $line-height * 4;
     $padding-right: rem-calc(20);
     $icon-size-with-padding: $icon-size + $padding-right;
-    $polygon-size: $icon-size / 2;
+    $polygon-size: $icon-size * 0.5;
     @include background-till-left-of-screen;
     @include brand-secondary-background;
     border: $border-width solid $brand-secondary;

app/assets/stylesheets/mixins/layouts.scss

@@ -33,7 +33,7 @@
 }
 
 @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) {
-  $global-padding: rem-calc(map-get($grid-column-gutter, medium)) / 2;
+  $global-padding: rem-calc(map-get($grid-column-gutter, medium)) * 0.5;
   bottom: 0;
   content: "";
   display: block;
@@ -44,7 +44,7 @@
   top: 0;
 
   @if $adjust-padding {
-    $small-padding: rem-calc(map-get($grid-column-gutter, small)) / 2;
+    $small-padding: rem-calc(map-get($grid-column-gutter, small)) * 0.5;
 
     left: -$small-padding;
     right: -$small-padding;

app/assets/stylesheets/mixins/sdg.scss

@@ -1,5 +1,5 @@
 @mixin sdg-goal-list($spacing: 1ch) {
-  $min-spacing: $sdg-icon-min-width / 10;
+  $min-spacing: $sdg-icon-min-width * 0.1;
   $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
 
   display: flex;

app/assets/stylesheets/participation.scss

@@ -1643,7 +1643,7 @@
 }
 
 .poll-question-answers {
-  @include flex-with-gap($line-height / 4);
+  @include flex-with-gap($line-height * 0.25);
   flex-wrap: wrap;
 
   .button {