diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0b1f1a8..dda0cd8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,27 @@
 # HEAD
 
-* **assets:** Update @mozilla-protocol/assets to 6.1.1
+* **css:** (breaking) Remove support for vendor prefixing (#957)
+
+## Migration Tips
+
+* This version removes mixins which added vendor-prefixes. Browser support for these is now excellent.
+  - One migration path is to edit your code to use the unprefixed versions.
+  - Another option is to move these utility mixins into your own code base (though, be aware they are
+    no longer used in Protocol and this will not give you backwards compatible Protocol components).
+  - If you need that level of vendor prefix support consider adding a tool such as
+    [autoprefixer](https://github.com/postcss/autoprefixer) to your code base.
+  - Affected mixins are:
+    - `animation`
+    - `appearance`
+    - `background-size`
+    - `box-decoration-break`
+    - `box-sizing`
+    - `flexbox`, `flex`, `flex-direction`, `flex-wrap`, `align-items`, `justify-content`
+    - `grid*-gap`
+    - `inline-block`
+    - `multi-column*`
+    - `transform`, `transform-origin`, `transform-style`
+    - `transition`, `transition-property`, `transition-duration`, `transition-delay`
 
 ## Features
 
@@ -16,6 +37,7 @@
 
 * **assets:** (breaking) Update @mozilla-protocol/assets to 6.0.1
 * **css:** Update navigation and footer with Mozilla logo lockup.
+* **css:** Apply hover cursor from Details component to Details element (#948)
 
 ## Bug Fixes
 
@@ -42,6 +64,7 @@
 
 * **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`)
 * Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations.
+
 * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
 
 # 19.3.0
diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss
index 53fac6b0..40597cda 100644
--- a/assets/sass/protocol/base/elements/_forms.scss
+++ b/assets/sass/protocol/base/elements/_forms.scss
@@ -295,8 +295,8 @@ input[type='file'] {
 // with thanks to https://www.filamentgroup.com/lab/select-css.html
 
 select {
-    @include appearance(none);
-    @include border-box;
+    appearance: none;
+    box-sizing: border-box;
     @include bidi((
         (background-position, right 8px top 50%, left 8px top 50%),
         (padding, forms.$field-padding forms.$symbol-spacing forms.$field-padding forms.$field-padding, forms.$field-padding forms.$field-padding forms.$field-padding forms.$symbol-spacing),
diff --git a/assets/sass/protocol/components/_billboard.scss b/assets/sass/protocol/components/_billboard.scss
index c33f0cdf..fed130a3 100644
--- a/assets/sass/protocol/components/_billboard.scss
+++ b/assets/sass/protocol/components/_billboard.scss
@@ -13,7 +13,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
     position: relative;
 
     .mzp-c-billboard-content {
-        @include border-box;
+        box-sizing: border-box;
         margin: 0 auto;
         max-width: 346px;
         text-align: center;
@@ -51,9 +51,9 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
         }
 
         .mzp-c-billboard-content-container {
-            @include align-items(center);
-            @include flexbox;
-            @include justify-content(center);
+            align-items: center;
+            display: flex;
+            justify-content: center;
         }
 
         .mzp-c-billboard-image-container {
@@ -98,7 +98,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
         margin: $layout-xl 0;
 
         .mzp-c-billboard-content {
-            @include border-box;
+            box-sizing: border-box;
             max-width: 374px;
         }
 
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index 5272c1b2..19e0a2cb 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -78,9 +78,9 @@
 
 .mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
 a.mzp-c-button {
-    @include border-box;
+    box-sizing: border-box;
     @include font-size(16px);
-    @include transition(background-color 100ms, box-shadow 100ms, color 100ms);
+    transition: background-color 100ms, box-shadow 100ms, color 100ms;
     border-radius: $border-radius-sm;
     border: 2px solid transparent;
     cursor: pointer;
diff --git a/assets/sass/protocol/components/_callout.scss b/assets/sass/protocol/components/_callout.scss
index 2d099dcc..9b12d583 100644
--- a/assets/sass/protocol/components/_callout.scss
+++ b/assets/sass/protocol/components/_callout.scss
@@ -71,7 +71,7 @@
     @supports (display: grid) {
         @media #{$mq-md} {
             .mzp-l-content {
-                @include grid-column-gap($spacing-xl);
+                grid-column-gap: $spacing-xl;
                 display: grid;
                 grid-template-columns: 2fr 1fr;
             }
@@ -82,7 +82,7 @@
             }
 
             .mzp-c-callout-cta {
-                @include flexbox;
+                display: flex;
                 align-items: center;
                 justify-content: flex-end;
                 width: auto;
diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss
index 3a369a20..b73dd265 100644
--- a/assets/sass/protocol/components/_card.scss
+++ b/assets/sass/protocol/components/_card.scss
@@ -8,7 +8,7 @@
 // Base card class
 
 .mzp-c-card {
-    @include border-box;
+    box-sizing: border-box;
     background: $color-white;
     margin-bottom: $spacing-lg;
 
@@ -40,7 +40,7 @@
     }
 
     .mzp-c-card-content {
-        @include border-box;
+        box-sizing: border-box;
         padding: $spacing-sm;
     }
 
@@ -107,12 +107,12 @@
         &:hover,
         &:active,
         &:focus {
-            @include transition(box-shadow 0.1s ease-in-out);
+            transition: box-shadow 0.1s ease-in-out;
             box-shadow: 0 0 0 4px $color-marketing-gray-20;
 
             .mzp-c-card-title,
             .mzp-c-card-cta-text {
-                @include transition(border-bottom-color 100ms ease-in-out);
+                transition: border-bottom-color 100ms ease-in-out;
                 border-bottom: 2px solid;
             }
         }
diff --git a/assets/sass/protocol/components/_feature-card.scss b/assets/sass/protocol/components/_feature-card.scss
index 30a7b5ac..551cce68 100644
--- a/assets/sass/protocol/components/_feature-card.scss
+++ b/assets/sass/protocol/components/_feature-card.scss
@@ -159,11 +159,11 @@
             &.mzp-l-card-feature-right-half,
             &.mzp-l-card-feature-left-third,
             &.mzp-l-card-feature-right-third {
-                @include grid-column-gap($spacing-xl);
+                grid-column-gap: $spacing-xl;
                 display: grid;
 
                 .mzp-c-card-feature-content {
-                    @include flexbox;
+                    display: flex;
                     align-items: center;
                 }
             }
@@ -220,7 +220,7 @@
             &.mzp-l-card-feature-right-half,
             &.mzp-l-card-feature-left-third,
             &.mzp-l-card-feature-right-third {
-                @include grid-column-gap($spacing-2xl);
+                grid-column-gap: $spacing-2xl;
             }
         }
     }
diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss
index fc89a337..5379f773 100644
--- a/assets/sass/protocol/components/_footer.scss
+++ b/assets/sass/protocol/components/_footer.scss
@@ -39,7 +39,7 @@
 
 .mzp-c-footer-primary {
     @include text-body-md;
-    @include border-box;
+    box-sizing: border-box;
     @include clearfix;
     margin: 0 auto $layout-sm;
 
@@ -60,7 +60,7 @@
 
     a {
         background: url('#{$image-path}/logos/mozilla/logo-lockup-hor-white.svg') no-repeat;
-        @include background-size(134px, 32px);
+        background-size: 134px, 32px;
         @include image-replaced;
         display: inline-block;
         height: 32px;
@@ -173,10 +173,9 @@
 
         button::before {
             background: $url-image-expand-white top left no-repeat;
-
-            @include background-size(24px, 24px);
+            background-size: 24px, 24px;
             @include bidi(((right, 8px, left, auto),));
-            @include transition(transform 100ms ease-in-out);
+            transition: transform 100ms ease-in-out;
             content: '';
             height: 24px;
             margin-top: -12px;
@@ -186,7 +185,7 @@
         }
 
         button[aria-expanded='true']::before {
-            @include transform(rotate(45deg));
+            transform: rotate(45deg);
         }
     }
 
diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss
index 4921c8c9..76220a7d 100644
--- a/assets/sass/protocol/components/_menu-item.scss
+++ b/assets/sass/protocol/components/_menu-item.scss
@@ -27,7 +27,7 @@ $icon-size: 24px;
         &:active,
         &:focus {
             .mzp-c-menu-item-title {
-                @include transition(border-bottom-color 100ms ease-in-out);
+                transition: border-bottom-color 100ms ease-in-out;
                 border-bottom: 2px solid $color-black;
                 color: $color-black;
             }
@@ -118,7 +118,7 @@ $icon-size: 24px;
 
     @media #{$mq-md} {
         &:hover {
-            @include transition(box-shadow 0.1s ease-in-out);
+            transition: box-shadow 0.1s ease-in-out;
             box-shadow: 0 0 0 4px $color-marketing-gray-20;
         }
 
diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss
index 02daf868..42258ef2 100644
--- a/assets/sass/protocol/components/_menu-list.scss
+++ b/assets/sass/protocol/components/_menu-list.scss
@@ -38,7 +38,7 @@
             @include bidi(((padding-right, $spacing-sm * 2 + 14px, padding-left, $spacing-sm),));
 
             &::after {
-                @include background-size(20px, 20px);
+                background-size: 20px, 20px;
                 @include bidi(((right, $spacing-sm, left, auto),));
                 bottom: $spacing-sm;
                 content: '';
@@ -87,21 +87,19 @@
             width: 100%;
 
             &::after {
-                @include background-size(20px, 20px);
                 @include bidi(((right, 0, left, auto),));
-                background: $url-image-arrow-down-link center bottom no-repeat;
+                background: $url-image-arrow-down-link center bottom / 20px, 20px no-repeat;
                 bottom: 1px;
                 content: '';
                 display: inline-block;
                 position: absolute;
                 top: 0;
                 width: 16px;
-
-                @include transition(transform 200ms ease-in-out);
+                transition: transform 200ms ease-in-out;
             }
 
             &[aria-expanded='true']::after {
-                @include transform(scaleY(-1));
+                transform: scaleY(-1);
             }
 
             &:hover,
diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss
index f1120e76..7306dc9d 100644
--- a/assets/sass/protocol/components/_menu.scss
+++ b/assets/sass/protocol/components/_menu.scss
@@ -74,11 +74,9 @@
         text-decoration: none;
 
         &::before {
-            background: $url-image-expand-black top left no-repeat;
-
-            @include background-size(20px, 20px);
+            background: $url-image-expand-black top left / 20px, 20px no-repeat;
             @include bidi(((right, 8px, left, auto),));
-            @include transition(transform 100ms ease-in-out);
+            transition: transform 100ms ease-in-out;
             content: '';
             height: 20px;
             margin-top: -8px;
@@ -168,7 +166,7 @@
 .mzp-c-menu.mzp-is-enhanced .mzp-c-menu-category {
     &.mzp-is-selected {
         .mzp-c-menu-title::before {
-            @include transform(rotate(45deg));
+            transform: rotate(45deg);
         }
 
         .mzp-c-menu-panel {
@@ -181,7 +179,7 @@
         &.mzp-is-animated {
             .mzp-c-menu-panel,
             .mzp-c-menu-title::after {
-                @include animation(mzp-a-fade-in 80ms ease-in 0ms 1 normal both);
+                animation: mzp-a-fade-in 80ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */
             }
         }
 
@@ -204,7 +202,7 @@
 // Menu panel
 
 .mzp-c-menu-panel {
-    @include border-box;
+    box-sizing: border-box;
     background: $color-white;
     display: none;
     padding-top: $spacing-lg;
@@ -213,7 +211,7 @@
     // Close button is only visible for large screens.
     .mzp-c-menu-button-close {
         @include image-replaced;
-        @include transition(transform 100ms ease-in-out);
+        transition: transform 100ms ease-in-out;
         background: transparent url('#{$image-path}/icons/close.svg') center center no-repeat;
         border: none;
         cursor: pointer;
@@ -227,7 +225,7 @@
 
         &:hover,
         &:focus {
-            @include transform(scale(1.2));
+            transform: scale(1.2);
         }
 
         @media #{$mq-md} {
@@ -250,7 +248,7 @@
     }
 
     .mzp-c-menu-panel-container {
-        @include border-box;
+        box-sizing: border-box;
         margin: 0 auto;
         max-width: $content-max;
         padding: 0;
diff --git a/assets/sass/protocol/components/_modal.scss b/assets/sass/protocol/components/_modal.scss
index 43fbb47d..bf4734ac 100644
--- a/assets/sass/protocol/components/_modal.scss
+++ b/assets/sass/protocol/components/_modal.scss
@@ -31,7 +31,7 @@ html.mzp-is-noscroll {
 }
 
 .mzp-c-modal {
-    @include animation(mzp-a-fade-in 300ms ease-in 0ms 1 normal both);
+    animation: mzp-a-fade-in 300ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */
     background: $color-black;
     background: rgba(0, 0, 0, 0.85);
     bottom: 0;
@@ -79,9 +79,7 @@ html.mzp-is-noscroll {
 
     .mzp-c-modal-button-close {
         @include image-replaced;
-        background: transparent url('#{$image-path}/icons/close-white.svg') center center no-repeat;
-
-        @include background-size(20px 20px);
+        background: transparent url('#{$image-path}/icons/close-white.svg') center center / 20px, 20px no-repeat;
         border: none;
         height: 42px;
         min-width: 0;
@@ -91,8 +89,8 @@ html.mzp-is-noscroll {
 
         &:hover,
         &:focus {
-            @include transition(transform 0.1s ease-in-out);
-            @include transform(scale(1.1));
+            transition: transform 0.1s ease-in-out;
+            transform: scale(1.1);
         }
 
         &:focus {
diff --git a/assets/sass/protocol/components/_navigation.scss b/assets/sass/protocol/components/_navigation.scss
index 0b1bf902..aa457f6f 100644
--- a/assets/sass/protocol/components/_navigation.scss
+++ b/assets/sass/protocol/components/_navigation.scss
@@ -48,7 +48,7 @@
 @supports (position: sticky) {
     html.mzp-has-sticky-navigation {
         .mzp-c-navigation.mzp-is-sticky {
-            @include transition(transform 300ms ease-in-out);
+            transition: transform 300ms ease-in-out;
             left: 0;
             position: sticky;
             top: 0;
@@ -60,7 +60,7 @@
             }
 
             &.mzp-is-hidden {
-                @include transform(translate(0, -110%));
+                transform: translate(0, -110%);
             }
         }
 
@@ -78,7 +78,7 @@
     @include bidi(((float, left, right),));
 
     a {
-        @include background-size(101px, 24px);
+        background-size: 101px, 24px;
         @include image-replaced;
         background-image: url('#{$image-path}/logos/mozilla/logo-lockup-hor.svg');
         background-repeat: no-repeat;
@@ -98,6 +98,13 @@
 
     @media #{$mq-lg} {
         @include bidi(((margin, $spacing-lg ($spacing-md * 2) $spacing-lg 0, $spacing-lg 0 $spacing-lg ($spacing-md * 2)),));
+
+        a {
+            background-size: 112px, 32px;
+            height: 32px;
+            margin-top: $spacing-xs;
+            width: 112px;
+        }
     }
 
     @media #{$mq-xl} {
@@ -106,7 +113,7 @@
 
     .mzp-t-firefox & {
         a {
-            @include background-size(81px, 27px);
+            background-size: 81px, 27px;
             background-image: url('#{$image-path}/logos/firefox/logo-word-hor.svg');
             height: 27px;
             width: 81px;
@@ -120,7 +127,7 @@
 
         @media #{$mq-lg} {
             a {
-                @include background-size(109px, 36px);
+                background-size: 109px, 36px;
                 background-image: url('#{$image-path}/logos/firefox/logo-word-hor.svg');
                 height: 36px;
                 margin-top: 1px;
diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss
index 20961816..78e46bfe 100644
--- a/assets/sass/protocol/components/_notification-bar.scss
+++ b/assets/sass/protocol/components/_notification-bar.scss
@@ -5,7 +5,7 @@
 @use '../includes/lib' as *;
 
 .mzp-c-notification-bar {
-    @include border-box;
+    box-sizing: border-box;
     @include clearfix;
     @include text-body-sm;
     background-color: $color-marketing-gray-20;
diff --git a/assets/sass/protocol/components/_picto.scss b/assets/sass/protocol/components/_picto.scss
index 6e117c5c..2e2780d8 100644
--- a/assets/sass/protocol/components/_picto.scss
+++ b/assets/sass/protocol/components/_picto.scss
@@ -8,7 +8,7 @@
 // A small content block with a small image, usually an icon or spot illustration.
 
 .mzp-c-picto {
-    @include border-box;
+    box-sizing: border-box;
     margin: 0 auto $layout-md;
     max-width: $content-md;
 }
diff --git a/assets/sass/protocol/components/_sidebar-menu.scss b/assets/sass/protocol/components/_sidebar-menu.scss
index ccdfda40..def570c1 100644
--- a/assets/sass/protocol/components/_sidebar-menu.scss
+++ b/assets/sass/protocol/components/_sidebar-menu.scss
@@ -89,7 +89,7 @@
         @include bidi((
             (right, 0, left, auto),
         ));
-        @include transform(rotate(90deg));
+        transform: rotate(90deg);
         color: $color-marketing-gray-80;
         content: none;
         font-size: 1.5em;
diff --git a/assets/sass/protocol/components/_split.scss b/assets/sass/protocol/components/_split.scss
index 609455dd..a8780a3c 100644
--- a/assets/sass/protocol/components/_split.scss
+++ b/assets/sass/protocol/components/_split.scss
@@ -174,7 +174,7 @@
 
 @media #{$mq-md} {
     .mzp-c-split-body {
-        @include border-box;
+        box-sizing: border-box;
         @include bidi(((float, left, right),));
         padding: 0 calc($h-grid-lg * 0.5);
         width: 50%;
@@ -185,7 +185,7 @@
     }
 
     .mzp-c-split-media {
-        @include border-box;
+        box-sizing: border-box;
         @include bidi(((float, right, left),));
         padding: 0 ($h-grid-lg * 0.5);
         width: 50%;
diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss
index bcb3a18b..4736d496 100644
--- a/assets/sass/protocol/components/_sticky-promo.scss
+++ b/assets/sass/protocol/components/_sticky-promo.scss
@@ -53,7 +53,7 @@ $logos: (
     }
 
     &.mzp-a-fade-out {
-        @include animation(mzp-a-fade-out 100ms ease 5ms both);
+        animation: mzp-a-fade-out 100ms ease 5ms both; /* stylelint-disable-line no-unknown-animations */
     }
 
     @media #{$mq-sm} {
@@ -83,7 +83,7 @@ $logos: (
     &.mzp-t-product-nightly {
         .mzp-c-sticky-promo-title {
             @include bidi(((background-position, top left, top right),));
-            @include background-size(auto 40px);
+            background-size: auto 40px;
             background-position: top left;
             background-repeat: no-repeat;
             padding: (40px + $spacing-lg) 0 0;
diff --git a/assets/sass/protocol/components/forms/_choice.scss b/assets/sass/protocol/components/forms/_choice.scss
index 9cdd842c..58dba43d 100644
--- a/assets/sass/protocol/components/forms/_choice.scss
+++ b/assets/sass/protocol/components/forms/_choice.scss
@@ -86,7 +86,7 @@
         &[type='checkbox'] + label::before,
         &[type='radio'] + label::before {
             @include bidi(((left, 0, right, auto),));
-            @include border-box;
+            box-sizing: border-box;
             background: $color-white;
             border-radius: 2px;
             border: forms.$field-border;
diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/_index.scss
index 5b955cc6..c35b6d43 100644
--- a/assets/sass/protocol/includes/forms/_index.scss
+++ b/assets/sass/protocol/includes/forms/_index.scss
@@ -84,7 +84,7 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
 }
 
 @mixin form-input() {
-    @include border-box;
+    box-sizing: border-box;
     @include text-body-md;
     background-color: $color-white;
     border-radius: $field-border-radius;
@@ -96,7 +96,7 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
 
 @mixin form-msg() {
     @include text-body-xs;
-    @include border-box;
+    box-sizing: border-box;
     background-color: $field-border-color-error-hover;
     border-radius: $border-radius-sm;
     box-shadow: $box-shadow-sm;
diff --git a/assets/sass/protocol/includes/mixins/_details.scss b/assets/sass/protocol/includes/mixins/_details.scss
index d1a9f8fb..de14d150 100644
--- a/assets/sass/protocol/includes/mixins/_details.scss
+++ b/assets/sass/protocol/includes/mixins/_details.scss
@@ -5,7 +5,6 @@
 @use '../tokens';
 @use 'bidi';
 @use 'images';
-@use 'utils';
 
 @mixin details {
     .is-summary {
@@ -34,9 +33,9 @@
 
     &::before {
         background: images.$url-image-expand-black top left no-repeat;
-        @include utils.background-size(20px, 20px);
+        background-size: 20px, 20px;
         @include bidi.bidi(((right, 8px, left, auto),));
-        @include utils.transition(transform 100ms ease-in-out);
+        transition: transform 100ms ease-in-out;
         content: '';
         height: 20px;
         margin-top: -8px;
@@ -47,5 +46,5 @@
 }
 
 @mixin summary-open {
-    @include utils.transform(rotate(45deg));
+    transform: rotate(45deg);
 }
diff --git a/assets/sass/protocol/includes/mixins/_grid.scss b/assets/sass/protocol/includes/mixins/_grid.scss
index 7a1dafdf..db1651c8 100644
--- a/assets/sass/protocol/includes/mixins/_grid.scss
+++ b/assets/sass/protocol/includes/mixins/_grid.scss
@@ -3,7 +3,6 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @use '../tokens';
-@use 'utils';
 
 // Grid columns
 $column-width: 8.333%; // 100% / 12 columns
@@ -13,7 +12,7 @@ $gutter-width: tokens.$layout-sm;
 // Usage:
 //  .foo { @include colspan(4); }
 @mixin colspan($columns) {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: $column-width * $columns;
     padding-left: $gutter-width * 0.5;
     padding-right: $gutter-width * 0.5;
@@ -25,26 +24,26 @@ $gutter-width: tokens.$layout-sm;
 }
 
 @mixin grid-quarter {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 25%;
 }
 
 @mixin grid-third {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 33.333%;
 }
 
 @mixin grid-half {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 50%;
 }
 
 @mixin grid-two-thirds {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 66.666%;
 }
 
 @mixin grid-three-quarters {
-    @include utils.border-box;
+    box-sizing: border-box;
     width: 75%;
 }
diff --git a/assets/sass/protocol/includes/mixins/_utils.scss b/assets/sass/protocol/includes/mixins/_utils.scss
index 71390bfa..385ecf5c 100644
--- a/assets/sass/protocol/includes/mixins/_utils.scss
+++ b/assets/sass/protocol/includes/mixins/_utils.scss
@@ -20,110 +20,6 @@
     }
 }
 
-// Mixins for CSS3 properties that still need prefixes in some browsers.
-@mixin transition($transition...) {
-    -webkit-transition: $transition;
-    transition: $transition;
-}
-
-@mixin transform($transform...) {
-    -webkit-transform: $transform;
-    transform: $transform;
-}
-
-@mixin transform-origin($transform-origin...) {
-    -webkit-transform-origin: $transform-origin;
-    transform-origin: $transform-origin;
-}
-
-@mixin transform-style($transform-style...) {
-    -webkit-transform-style: $transform-style;
-    transform-style: $transform-style;
-}
-
-// Extra mixins for fine-tuned transitions
-@mixin transition-property($transition-property...) {
-    -webkit-transition-property: $transition-property;
-    transition-property: $transition-property;
-}
-
-@mixin transition-duration($transition-duration...) {
-    -webkit-transition-duration: $transition-duration;
-    transition-duration: $transition-duration;
-}
-
-@mixin transition-timing-function($transition-timing-function...) {
-    -webkit-transition-timing-function: $transition-timing-function;
-    transition-timing-function: $transition-timing-function;
-}
-
-@mixin transition-delay($transition-delay...) {
-    -webkit-transition-delay: $transition-delay;
-    transition-delay: $transition-delay;
-}
-
-@mixin animation($parameters...) {
-    -webkit-animation: $parameters;
-    animation: $parameters;
-}
-
-@mixin border-box {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-@mixin flexbox {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-}
-
-@mixin flex($values: auto) {
-    -webkit-box-flex: $values;
-    -moz-box-flex: $values;
-    -webkit-flex: $values;
-    flex: $values;
-}
-
-@mixin flex-direction($value: column) {
-    -webkit-box-direction: $value;
-    flex-direction: $value;
-}
-
-@mixin flex-wrap($value: wrap) {
-    -ms-flex-wrap: $value;
-    flex-wrap: $value;
-}
-
-@mixin align-items($align: stretch) {
-    -webkit-box-align: $align;
-    align-items: $align;
-}
-
-@mixin justify-content($justify: flex-start) {
-    -webkit-box-pack: $justify;
-    justify-content: $justify;
-}
-
-@mixin background-size($sizes...) {
-    -webkit-background-size: $sizes;
-    background-size: $sizes;
-}
-
-@mixin box-decoration-break($value: slice) {
-    -webkit-box-decoration-break: $value;
-    box-decoration-break: $value;
-}
-
-@mixin appearance($value) {
-    -webkit-appearance: $value;
-    -moz-appearance: $value;
-    appearance: $value;
-}
-
 // Hide an element visually, but not from screen readers
 @mixin visually-hidden {
     border: 0;
@@ -143,13 +39,6 @@
     display: none;
 }
 
-// Inline block hack for pages that still need to support old IE.
-@mixin inline-block {
-    display: inline-block;
-    *display: inline;
-    *zoom: 1;
-}
-
 // not the most up to date method, but works in IE7
 @mixin image-replaced {
     direction: ltr;
@@ -162,7 +51,7 @@
 // Flip an element horizontally for RTL locales such as Arabic and Hebrew.
 // Usually applied to pseudo-elements with a background-image, not for text.
 @mixin flip-horizontally {
-    @include transform(scale(-1, 1));
+    transform: scale(-1, 1);
 }
 
 // Adds a right-pointing arrow after
@@ -178,31 +67,10 @@
     &::before {
         content: '\25B8\00A0'; // triangle+space
         white-space: nowrap;
-        @include transform(rotate(180deg));
+        transform: rotate(180deg);
     }
 }
 
-// Multiple columns
-@mixin multi-column($width: auto, $count: auto, $gap: normal) {
-    -webkit-columns: $width $count;
-    -moz-columns: $width $count;
-    columns: $width $count;
-    -webkit-column-gap: $gap;
-    -moz-column-gap: $gap;
-    column-gap: $gap;
-}
-
-@mixin multi-column-clear {
-    @include multi-column(auto, auto, normal);
-}
-
-@mixin multi-column-avoid-break {
-    page-break-inside: avoid;
-    -webkit-column-break-inside: avoid;
-    -moz-column-break-inside: avoid;
-    break-inside: avoid;
-}
-
 // Preserve aspect ratio to prevent content jumping when media loads.
 // Apply to a direct parent element of an image or video.
 @mixin aspect-ratio($width, $height, $width-wrapper: 100%) {
@@ -280,20 +148,3 @@
         }
     }
 }
-
-// Mixins for CSS grid legacy prefixed properties
-// https://bugzilla.mozilla.org/show_bug.cgi?id=1398482
-@mixin grid-gap($value: inherit) {
-    grid-gap: $value;
-    gap: $value;
-}
-
-@mixin grid-row-gap($value: inherit) {
-    grid-row-gap: $value;
-    row-gap: $value;
-}
-
-@mixin grid-column-gap($value: inherit) {
-    grid-column-gap: $value;
-    column-gap: $value;
-}