Use calc() where divisions are involved

The division operator `/` from Sass is deprecated because `/` is used in
CSS for uses other than dividing numbers. That's why we were getting
many 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($line-height, 2) or calc($line-height / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

margin-top: $line-height / 2;
```

Since using math.div makes the code harder to read and `calc` is
universally supported by all browsers (although the implementation in
Internet Explorer doesn't work in certain cases), we're using `calc`
when assigning the value to a CSS property.

However, we're also using divisions when assigning Sass variables, and
in those cases using `calc` is trickier because sometimes these
variables are used in other operations. We'll handle these cases in the
next commit.

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

@@ -22,7 +22,7 @@
     dd {
       flex-basis: 20em;
       flex-grow: 1;
-      max-width: $global-width * 3 / 4;
+      max-width: calc(#{$global-width} * 3 / 4);
     }
 
     + * {

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

@@ -11,7 +11,7 @@
   }
 
   .callout {
-    flex-basis: $global-width / 3;
+    flex-basis: calc(#{$global-width} / 3);
     flex-grow: 1;
     margin-bottom: 0;
   }

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

@@ -4,7 +4,7 @@
 
   .button {
     &.upload-image {
-      margin-bottom: $line-height / 2;
+      margin-bottom: calc(#{$line-height} / 2);
     }
   }
 

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

@@ -32,7 +32,7 @@
     align-items: flex-start;
 
     + * {
-      margin-top: $line-height / 2;
+      margin-top: calc(#{$line-height} / 2);
     }
 
     .edit-link,

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

@@ -34,7 +34,7 @@
   }
 
   &::after {
-    bottom: $padding / 2;
+    bottom: calc(#{$padding} / 2);
     color: $white;
     position: absolute;
     right: calc(#{$padding} + #{$quote-padding});

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

@@ -5,7 +5,7 @@
 
     @each $size, $headers in $header-styles {
       @include breakpoint($size) {
-        font-size: (rem-calc(map-get(map-get($headers, h2), font-size)) + rem-calc(map-get(map-get($headers, h3), font-size))) / 2;
+        font-size: calc(#{rem-calc(map-get(map-get($headers, h2), font-size)) + rem-calc(map-get(map-get($headers, h3), font-size))} / 2);
       }
     }
   }