Trick SCSS into not doing certain buggy preprocessing

Author: thoughtbot-summer

app/assets/stylesheets/marketing_redesign/components/_footer.scss

@@ -3,7 +3,7 @@ footer {
   display: flex;
   font-size: var(--font-size--small);
   gap: var(--space--x-large);
-  padding: var(--space--large) Max(var(--space--base), (100% - var(--container--large)) / 2);
+  padding: var(--space--large) Max(var(--space--base), calc(#{100%} - var(--container--large)) / 2);
 
   .logo {
     font-family: var(--font-family--body);

app/assets/stylesheets/marketing_redesign/components/_header.scss

@@ -4,7 +4,7 @@ header {
   font-family: var(--font-family--heading);
   font-size: var(--font-size--ui);
   gap: var(--space--x-large);
-  padding: var(--space--base) Max(var(--space--base), (100% - var(--container--large)) / 2);
+  padding: var(--space--base) Max(var(--space--base), calc(#{100%} - var(--container--large)) / 2);
 
   .logo {
     font-family: var(--font-family--body);