This fixes the hide-xx utilities when used to toggle two elements at different breakpoints.

Before	After

Problem

The .hide-xx utilities overlap by 1 px at each break point. Currently the values are like this:

.hide-sm: 0 - 544px
.hide-md:     544px - 768px
.hide-lg:             768px - 1012px
.hide-xl:                     1012px - infinite

So if two elements get toggled like with:

<div class="hide-md"></div>
<div class="hide-lg"></div>

At exactly 768px both elements are hidden.

Fix

By removing 1px from all the max-widths, e.g. max-width: $width-sm - 1px, they don't overlap anymore and continue seamless:

.hide-sm: 0 - 543px
.hide-md:          544px - 767px
.hide-lg:                       768px - 1011px
.hide-xl:                                     1012px - infinite