maverick-wave 5.8.0 → 5.11.0

package/src/partials/utilities-container.html

@@ -350,6 +350,44 @@
   </div>
 </div>
 
+<h3 class="mw-mb-4 mw-mt-6">Glow</h3>
+<p class="mw-text-muted mw-text-measure">
+  The other half of the lighting model: elevation says how far a surface floats
+  above the page, a glow says it is the thing giving off the light. Two layers
+  like elevation, and both without an offset - light does not fall downwards,
+  which is the whole difference between this and a coloured shadow. For the one
+  element on a screen that has to be looked at first, and for nothing else. Bare
+  <code>mw-glow</code> is the primary one.
+</p>
+<div class="mw-grid-3 mw-gap-6">
+  <div class="mw-card mw-card-simple mw-glow-primary">
+    <h4 class="mw-text-medium mw-mb-1">primary</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">The brand, and the default.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-secondary">
+    <h4 class="mw-text-medium mw-mb-1">secondary</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">The second brand tone.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-info">
+    <h4 class="mw-text-medium mw-mb-1">info</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Something worth reading.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-success">
+    <h4 class="mw-text-medium mw-mb-1">success</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">It worked - say so once.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-warning">
+    <h4 class="mw-text-medium mw-mb-1">warning</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Check this before going on.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-danger">
+    <h4 class="mw-text-medium mw-mb-1">danger</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">
+      The one that cannot be undone.
+    </p>
+  </div>
+</div>
+
 <h3 class="mw-mb-4 mw-mt-6">Responsive Display</h3>
 <p class="mw-text-muted mw-text-measure">
   Mobile-first and min-width, like everything else here.

package/src/scss/abstracts/_functions.scss

@@ -27,10 +27,16 @@
   @return map.get(v.$breakpoints, $key);
 }
 
+// What --mw-radius-scale cannot take away, shared by both functions below: a
+// page at scale 0 is meant to read as square, not as cut out of sheet metal.
+// The smallest step the scale already has, so the hardest setting lands on it
+// rather than off the end.
+$_radius-floor: map.get(v.$radius, 'xs');
+
 // Emitted through --mw-radius-scale, so one number retunes every rounded box in
 // the framework at once - 0 squares them off, above 1 rounds them further, and
-// the corner arc follows. 'none' and 'full' pass through: a scaled 0 is still 0,
-// and a circle has to stay a circle.
+// the corner arc follows. 'none' and 'full' pass through: an explicit 0 stays
+// 0, and a circle has to stay a circle.
 @function radius($key) {
   $value: map.get(v.$radius, $key);
 
@@ -38,7 +44,29 @@
     @return $value;
   }
 
-  @return calc(#{$value} * var(--mw-radius-scale, 1));
+  @return max(#{$_radius-floor}, calc(#{$value} * var(--mw-radius-scale, 1)));
+}
+
+// The sharp pair of the surface signature, squared against the scale so the two
+// halves of the silhouette keep their relationship. Linear, a page turned up to
+// Round holds an 8.5px corner against a 34px arc and the pair stops reading as
+// one shape; squared, the sharp side opens up with it.
+@function radius-sharp() {
+  $scale: var(--mw-radius-scale, 1);
+
+  @return max(
+    #{$_radius-floor},
+    calc(#{map.get(v.$radius, 'sm')} * #{$scale} * #{$scale})
+  );
+}
+
+// For the animations that run on their own clock rather than off a state change
+// - spinners, shimmers, the pulses. The duration tokens carry --mw-motion-scale
+// already, but these name their own timing, and a motion setting that leaves
+// the one thing on screen that is permanently moving at its old speed is not a
+// motion setting. prefers-reduced-motion still overrides the result outright.
+@function motion($duration) {
+  @return calc(#{$duration} * var(--mw-motion-scale, 1));
 }
 
 // Function to get a z-index value from the z-index map

package/src/scss/abstracts/_mixins.scss

@@ -2,17 +2,14 @@
 @use 'variables' as v;
 @use 'functions' as *;
 
-// `media-down` stops 0.02px short, or both ranges match at exactly 768px - an
-// iPad in portrait, where mw-hide-mobile and mw-hide-desktop would both hide.
-// 0.02 and not 1, because a viewport can be fractional (zoom, scaled display).
 @mixin media-up($breakpoint) {
-  @media (min-width: map.get(v.$breakpoints, $breakpoint)) {
+  @media (width >= #{map.get(v.$breakpoints, $breakpoint)}) {
     @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  @media (max-width: map.get(v.$breakpoints, $breakpoint) - 0.02px) {
+  @media (width < #{map.get(v.$breakpoints, $breakpoint)}) {
     @content;
   }
 }
@@ -231,7 +228,7 @@
 // the top arc where a fill already owns that corner.
 @mixin surface($border-width: 1px, $corners: 'both') {
   position: relative;
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  border-radius: radius-sharp() radius('xl') radius-sharp() radius('xl');
 
   &::after {
     @include corner-accent($border-width, $corners);
@@ -245,27 +242,80 @@
     border-radius: radius('md');
 
     &::after {
-      display: none;
+      @include corner-mark($border-width);
     }
   }
 }
 
+// Shared by both corner marks, which are meant to read as the same gesture at
+// two volumes: how far the arc runs along the horizontal against the vertical,
+// and where it stops being opaque. A percentage and not a length because the
+// mask is an ellipse - see corner-accent() for what that costs.
+$_corner-stretch: 1.5;
+$_corner-opaque: 55%;
+
+// What is left of the signature once the silhouette is switched off: the same
+// arc, on one corner, thinner and over a shorter run. The two-corner shape is
+// the loud half and mw-corners-even exists to turn it off - but a surface with
+// nothing left of it could have come from any framework, and this is the mark
+// that says otherwise. Deliberately quiet enough to read as a detail.
+//
+// Built from radius('md') because that is what the even box is drawn at, and
+// it follows --mw-radius-scale down to a square, where the arc becomes a
+// bracket in the corner rather than disappearing.
+@mixin corner-mark($border-width: 1px) {
+  $r: max(0px, calc(#{radius('md')} - #{$border-width}));
+
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1.5px solid var(--mw-corner-accent);
+  border-radius: $r;
+  $reach: max(18px, calc(#{radius('md')} * 2.2));
+
+  mask-image: radial-gradient(
+    ellipse calc(#{$reach} * #{$_corner-stretch}) #{$reach} at 100% 0,
+    #000 $_corner-opaque,
+    transparent 100%
+  );
+}
+
 // The arc alone, for a variant that redraws it without restating the shape
 @mixin corner-accent($border-width: 1px, $corners: 'both') {
   // max(), not a bare subtraction: --mw-radius-scale can take the radius to 0,
   // and while a negative border-radius is clamped for us, a negative circle in
   // the mask below would throw the whole gradient away and lose the arc.
-  $sharp: max(0px, calc(#{radius('sm')} - #{$border-width}));
+  $sharp: max(0px, calc(#{radius-sharp()} - #{$border-width}));
   $round: max(0px, calc(#{radius('xl')} - #{$border-width}));
   // Opaque to where the curve ends, fading from there, so the arc runs into the
   // straight edge instead of stopping at the tangent. 1.8 is bounded by the
   // shortest surface: past about 2 the two arcs meet on a 50px box and read as
   // a frame.
-  $reach: calc(#{$round} * 1.8);
-  $top: radial-gradient(circle $reach at 100% 0, #000 $round, transparent 100%);
+  //
+  // The floor is what keeps the mark alive at --mw-radius-scale: 0. The reach
+  // is derived from the radius, so a squared-off page took it to a zero-width
+  // circle and the accent vanished on every surface at once - the one setting
+  // where the framework has least else left to recognise it by. At zero radius
+  // there is no curve to trace and the 22px run reads as a bracket instead.
+  $reach: max(22px, calc(#{$round} * 1.8));
+  // An ellipse and not a circle: with equal reach on both axes the arc reads as
+  // a quarter circle, and the mark looks like a corner radius someone forgot to
+  // finish. Half again as far along the horizontal gives it a direction - it
+  // sits on the top edge and turns down, rather than cutting the corner.
+  //
+  // The stop is a percentage here where the circle could take a length: on an
+  // ellipse a length would be measured along one axis only and the fade would
+  // start at different points on the two. The default sits where $round fell.
+  $reach-x: calc(#{$reach} * #{$_corner-stretch});
+  $top: radial-gradient(
+    ellipse $reach-x $reach at 100% 0,
+    #000 $_corner-opaque,
+    transparent 100%
+  );
   $bottom: radial-gradient(
-    circle $reach at 0 100%,
-    #000 $round,
+    ellipse $reach-x $reach at 0 100%,
+    #000 $_corner-opaque,
     transparent 100%
   );
 

package/src/scss/abstracts/_variables.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'sass:string';
 
 $mw-theme-mode: 'switchable' !default; // 'dark', 'light', or 'switchable'
@@ -162,17 +163,28 @@ $focus-halo-opacity: 28% !default;
   );
 }
 
-// Darker, fully opaque variant of a token
+// Darker by a share of the color's own lightness, hue and chroma kept. OKLch and
+// not `color-mix(..., black)`: mixing toward black in HSL takes the saturation
+// down with the lightness, so one $amount reads as a different step on every hue
+// - the yellow goes grey while the blue only dims. Here the six status colors
+// move by the same perceived amount.
 @function shade($name, $amount) {
+  $factor: math.div(100% - $amount, 100%);
+
   @return string.unquote(
-    'color-mix(in hsl, var(--mw-#{$name}), black #{$amount})'
+    'oklch(from var(--mw-#{$name}) calc(l * #{$factor}) c h)'
   );
 }
 
-// Lighter, fully opaque variant of a token
+// The other direction, toward white. Chroma is pulled back by the same share it
+// is lightened by, because a color lifted at full chroma reads as neon rather
+// than as a tint of itself - which is what the HSL mix did implicitly.
 @function tint($name, $amount) {
+  $lift: math.div($amount, 100%);
+  $rest: math.div(100% - $amount, 100%);
+
   @return string.unquote(
-    'color-mix(in hsl, var(--mw-#{$name}), white #{$amount})'
+    'oklch(from var(--mw-#{$name}) calc(l + (1 - l) * #{$lift}) calc(c * #{$rest}) h)'
   );
 }
 
@@ -183,8 +195,10 @@ $focus-halo-opacity: 28% !default;
   );
 }
 
-// Darkened straight toward black, $amount being how much of the color survives.
-// shade() washes out the saturation on the way, which a surface must not do.
+// Darkened straight toward black, $amount being how much of the color *survives*
+// - not how far its lightness moves, which is what shade() above scales. The two
+// part company at the deep end: at 14% shade() lands near L 0.05, where the hue
+// is clipped out of gamut, while this keeps the channel ratios and stays blue.
 @function deepen($name, $amount) {
   @return string.unquote(
     'color-mix(in srgb, var(--mw-#{$name}) #{$amount}, black)'
@@ -223,11 +237,16 @@ $focus-halo-opacity: 28% !default;
 
 // Near is the contact shadow that pins the box down, far the ambient spread that
 // says how high it floats. One layer alone reads as a blur, the pair as light.
-// Theme-prefixed tokens, so the ramp is declared once per theme.
-@function elevation($theme, $y-near, $blur-near, $y-far, $blur-far) {
+//
+// Built on the theme-resolved shadow tokens rather than a per-theme pair: the two
+// themes only ever differed in the colour of those two layers, never in the
+// geometry, so the ramp is one set of five and the theme reaches it through
+// --mw-shadow-near/-far. That also makes .mw-shadows-flat a single-selector
+// override again - it is no longer re-declared further down the tree.
+@function elevation($y-near, $blur-near, $y-far, $blur-far) {
   @return string.unquote(
-    '0 #{$y-near} #{$blur-near} var(--mw-#{$theme}-shadow-near),' +
-      ' 0 #{$y-far} #{$blur-far} var(--mw-#{$theme}-shadow-far)'
+    '0 #{$y-near} #{$blur-near} var(--mw-shadow-near),' +
+      ' 0 #{$y-far} #{$blur-far} var(--mw-shadow-far)'
   );
 }
 
@@ -307,6 +326,10 @@ $semantic-colors: (
   danger: var(--mw-danger-color),
 );
 
+// The theme keys that are not colors. light-dark() only takes <color>, so these
+// keep the alias-per-theme route while everything else resolves in one line.
+$theme-non-colors: ('hero-image-filter');
+
 // Dark theme colors. Emitted as --mw-dark-<key>, hence the prefixed references.
 $dark-theme-colors: (
   'page-background': $dark-background,
@@ -317,17 +340,11 @@ $dark-theme-colors: (
   'footer-background': surface('dark-page-background', $footer-surface-dark),
   'border': surface('dark-page-background', 1.35),
   'shadow': fade('dark-text-color', 30%),
-  // A component names a level instead of inventing another `0 5px 9px`
   'shadow-near': alpha(
       surface('dark-page-background', $shadow-cast-dark),
       $shadow-near-dark
     ),
   'shadow-far': fade('dark-text-color', $shadow-far-dark),
-  'elevation-1': elevation('dark', 1px, 2px, 1px, 4px),
-  'elevation-2': elevation('dark', 2px, 4px, 5px, 12px),
-  'elevation-3': elevation('dark', 3px, 6px, 10px, 24px),
-  'elevation-4': elevation('dark', 6px, 12px, 18px, 40px),
-  'elevation-5': elevation('dark', 10px, 20px, 30px, 64px),
   'text-color': $dark-text-color,
   'text-muted-color': muted(0.7),
   // Derived, so overriding a root color yields a readable dark variant for free
@@ -355,11 +372,6 @@ $light-theme-colors: (
   'shadow': fade('light-text-color', 30%),
   'shadow-near': fade('light-text-color', $shadow-near-light),
   'shadow-far': fade('light-text-color', $shadow-far-light),
-  'elevation-1': elevation('light', 1px, 2px, 1px, 4px),
-  'elevation-2': elevation('light', 2px, 4px, 5px, 12px),
-  'elevation-3': elevation('light', 3px, 6px, 10px, 24px),
-  'elevation-4': elevation('light', 6px, 12px, 18px, 40px),
-  'elevation-5': elevation('light', 10px, 20px, 30px, 64px),
   'text-color': $light-text-color,
   'text-muted-color': muted(0.5),
   // Other direction: a color too light to read on paper is deepened
@@ -377,6 +389,17 @@ $light-theme-colors: (
   'corner-accent-hover': token('light-primary-text-color'),
 );
 
+// The elevation ramp, shared by both themes - see elevation(). A component names
+// a level instead of inventing another `0 5px 9px`.
+// Emitted as --mw-<key>.
+$elevations: (
+  'elevation-1': elevation(1px, 2px, 1px, 4px),
+  'elevation-2': elevation(2px, 4px, 5px, 12px),
+  'elevation-3': elevation(3px, 6px, 10px, 24px),
+  'elevation-4': elevation(6px, 12px, 18px, 40px),
+  'elevation-5': elevation(10px, 20px, 30px, 64px),
+);
+
 // Emitted as --mw-header-<key>. Built from the primary rather than a theme token,
 // because the bar is dark in both themes - see $header-surface.
 $header-colors: (
@@ -463,6 +486,9 @@ $spacing: (
 // Breakpoints
 // Shared by _cards.scss and _pricing.scss, which have to agree on it
 $mw-card-narrow: 360px !default;
+// The other end of the same axis: at this width a card has the room for the
+// larger title and the roomier padding it used to get from a `md` viewport
+$mw-card-wide: 420px !default;
 
 $breakpoints: (
   'xs': 375px,

package/src/scss/base/_base.scss

@@ -1,6 +1,17 @@
+@use 'sass:list';
+@use 'sass:map';
 @use '../abstracts' as *;
 
 @layer mw.base {
+  // Registered because it is multiplied into all six duration tokens below: a
+  // value that does not parse takes every one of them with it, and a page with
+  // no transitions at all is a hard failure for a typo in one line.
+  @property --mw-motion-scale {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1;
+  }
+
   // Active theme set and its token prefix, derived from $mw-theme-mode
   $_active-theme: $dark-theme-colors;
   $_active-prefix: 'dark';
@@ -10,6 +21,14 @@
     $_active-prefix: 'light';
   }
 
+  // Everything light-dark() can resolve on its own - see $theme-non-colors
+  $_theme-colors: ();
+  @each $name, $value in $dark-theme-colors {
+    @if not list.index($theme-non-colors, $name) {
+      $_theme-colors: map.set($_theme-colors, $name, $value);
+    }
+  }
+
   // CSS Variables for theming and overriding
   :root {
     // Brand and neutral colors
@@ -37,13 +56,19 @@
       --mw-light-#{$name}: #{$value};
     }
 
-    // The scale lives in the variables file - these are the runtime knobs
-    --mw-duration-instant: #{$duration-instant};
-    --mw-duration-fast: #{$duration-fast};
-    --mw-duration-base: #{$duration-base};
-    --mw-duration-slow: #{$duration-slow};
-    --mw-duration-slower: #{$duration-slower};
-    --mw-duration-zoom: #{$duration-zoom};
+    // The scale lives in the variables file - these are the runtime knobs.
+    // Multiplied through --mw-motion-scale so one number retunes the page's
+    // tempo, the way --mw-radius-scale does for its corners: the six stand in a
+    // fixed ratio to each other and have to move together. The reduced-motion
+    // block below writes plain 1ms over the top, untouched by any of this.
+    --mw-duration-instant: calc(
+      #{$duration-instant} * var(--mw-motion-scale, 1)
+    );
+    --mw-duration-fast: calc(#{$duration-fast} * var(--mw-motion-scale, 1));
+    --mw-duration-base: calc(#{$duration-base} * var(--mw-motion-scale, 1));
+    --mw-duration-slow: calc(#{$duration-slow} * var(--mw-motion-scale, 1));
+    --mw-duration-slower: calc(#{$duration-slower} * var(--mw-motion-scale, 1));
+    --mw-duration-zoom: calc(#{$duration-zoom} * var(--mw-motion-scale, 1));
     --mw-ease-out: #{$ease-out};
     --mw-ease-in-out: #{$ease-in-out};
     --mw-ease-spring: #{$ease-spring};
@@ -67,6 +92,12 @@
     --mw-control-font-lg: #{$control-font-lg};
     --mw-control-line-height: #{$control-line-height};
 
+    // One ramp for both themes - the theme reaches it through the two shadow
+    // tokens the levels are built from
+    @each $name, $value in $elevations {
+      --mw-#{$name}: #{$value};
+    }
+
     // Focus ring
     --mw-focus-ring-width: #{$focus-ring-width};
     --mw-focus-ring-offset: #{$focus-ring-offset};
@@ -75,7 +106,9 @@
     --mw-focus-halo-opacity: #{$focus-halo-opacity};
 
     // The only way the chrome the browser draws itself follows the theme:
-    // scrollbars, the select popup, the date picker panel, number spinners
+    // scrollbars, the select popup, the date picker panel, number spinners.
+    // Under `switchable` this is also what light-dark() reads, so the pair below
+    // does double duty and the @supports block widens it to `light dark`.
     @if $mw-theme-mode == 'light' {
       color-scheme: light;
     } @else {
@@ -139,6 +172,62 @@
 
       color-scheme: light;
     }
+
+    // The same two themes, declared once instead of twice. A custom property
+    // holding light-dark() is resolved where it is *used*, against that
+    // element's color-scheme - so one declaration on :root serves both, and a
+    // class further down switches every token by changing nothing but the
+    // scheme. The page then also follows the OS out of the box, which the
+    // class-only route could never do: before the script had run, a machine set
+    // to light still got the dark theme for a frame.
+    //
+    // The block above stays as the fallback for Chrome 119-122 and Safari
+    // 16.4-17.4, which are inside the declared browserslist but predate
+    // light-dark(). Drop it, and the two class rules with it, once the support
+    // floor moves past Chrome 123 / Safari 17.5.
+    @supports (color: light-dark(#000, #fff)) {
+      :root,
+      .mw-theme-light {
+        @each $name, $value in $_theme-colors {
+          --mw-#{$name}: light-dark(
+            var(--mw-light-#{$name}),
+            var(--mw-dark-#{$name})
+          );
+        }
+      }
+
+      :root {
+        color-scheme: light dark;
+      }
+
+      // Not a color, so it cannot ride along above - it follows the OS here and
+      // is overridden by whichever class the toggle puts on the body
+      @media (prefers-color-scheme: light) {
+        :root {
+          @each $name in $theme-non-colors {
+            --mw-#{$name}: var(--mw-light-#{$name});
+          }
+        }
+      }
+
+      .mw-theme-light {
+        color-scheme: light;
+
+        @each $name in $theme-non-colors {
+          --mw-#{$name}: var(--mw-light-#{$name});
+        }
+      }
+
+      // Only reachable once the OS says light: the explicit counterpart to the
+      // class above, so a reader who wants dark on a light machine gets it
+      .mw-theme-dark {
+        color-scheme: dark;
+
+        @each $name in $theme-non-colors {
+          --mw-#{$name}: var(--mw-dark-#{$name});
+        }
+      }
+    }
   }
 
   // Form controls are deliberately light in both themes - see

package/src/scss/components/_badge.scss

@@ -84,7 +84,7 @@
       inset: 0;
       border-radius: inherit;
       background: inherit;
-      animation: mw-badge-pulse 1.8s var(--mw-ease-out) infinite;
+      animation: mw-badge-pulse motion(1.8s) var(--mw-ease-out) infinite;
     }
   }
 

package/src/scss/components/_buttons.scss

@@ -187,7 +187,7 @@
     }
 
     // The floor a thumb needs, over the visual size above
-    @media (pointer: coarse), (max-width: #{breakpoint('md')}) {
+    @media (pointer: coarse), (width <= #{breakpoint('md')}) {
       --mw-btn-icon-size: 2.75rem;
 
       &.mw-btn-sm {

package/src/scss/components/_cards.scss

@@ -58,14 +58,17 @@
       overflow: hidden;
     }
 
-    // Named, so the query cannot resolve to a container further up the tree. Only
-    // cards with a footer, and they claim their slot: inline-size containment
-    // computes the width as if the card were empty, so one that sizes to its
-    // content would collapse to its border.
-    &:has(.mw-card-footer) {
-      width: 100%;
-      container: mw-card / inline-size;
-    }
+    // Named, so the query cannot resolve to a container further up the tree.
+    // Every card, not only the ones with a footer: the title, the padding and
+    // the image height all used to step on a *viewport* breakpoint, so a card in
+    // a three-column grid on a wide desktop took the same 1.5rem title as the
+    // full-width one on a phone while being a third of its width.
+    //
+    // `width: 100%` is what makes it safe: inline-size containment computes the
+    // width as if the card were empty, so a card that sized to its content would
+    // otherwise collapse to its border.
+    width: 100%;
+    container: mw-card / inline-size;
 
     // The arc on the two round corners is the one mark that makes a card look
     // like this framework and not like a rounded box, so it is what the hover
@@ -168,6 +171,9 @@
     &-lg {
       --mw-card-img-height: 260px;
 
+      // On the window and not on the card: this declaration sits on the card,
+      // which is the container, and a container cannot query itself. The height
+      // of a picture is a question of room on screen anyway.
       @include media-up('sm') {
         --mw-card-img-height: 340px;
       }
@@ -176,6 +182,9 @@
     &-xl {
       --mw-card-img-height: 340px;
 
+      // On the window and not on the card: this declaration sits on the card,
+      // which is the container, and a container cannot query itself. The height
+      // of a picture is a question of room on screen anyway.
       @include media-up('sm') {
         --mw-card-img-height: 480px;
       }
@@ -187,7 +196,7 @@
       flex-grow: 1;
       padding: spacing('6') spacing('4') spacing('5');
 
-      @include media-up('sm') {
+      @container mw-card (width >= #{$mw-card-wide}) {
         padding: spacing('7') spacing('5') spacing('6');
       }
 
@@ -204,7 +213,7 @@
     &-title {
       margin-bottom: spacing('3');
       font-size: font-size('lg');
-      @include media-up('md') {
+      @container mw-card (width >= #{$mw-card-wide}) {
         font-size: font-size('xl');
       }
 
@@ -245,7 +254,7 @@
       line-height: 1.2;
       font-style: italic;
       color: var(--mw-text-muted-color);
-      @include media-up('md') {
+      @container mw-card (width >= #{$mw-card-wide}) {
         margin-bottom: spacing('3');
       }
     }
@@ -253,7 +262,7 @@
     &-text {
       margin: spacing('2') spacing('0') spacing('4') spacing('0');
       color: var(--mw-text-color);
-      @include media-down('sm') {
+      @container mw-card (width <= #{$mw-card-narrow}) {
         margin-bottom: spacing('2');
       }
     }
@@ -285,7 +294,7 @@
       // Stacked once the card is narrow, not once the window is - a card in a
       // three-column grid on a wide desktop is as narrow as the same card on a
       // phone and used to keep its actions in a cramped row anyway.
-      @container mw-card (max-width: #{$mw-card-narrow}) {
+      @container mw-card (width <= #{$mw-card-narrow}) {
         flex-direction: column;
         align-items: stretch;
         gap: spacing('2');
@@ -353,7 +362,7 @@
         justify-content: center;
         margin: spacing('0');
 
-        @include media-down('sm') {
+        @container mw-card (width <= #{$mw-card-narrow}) {
           font-size: font-size('sm');
         }
       }