From c9d15962859fea0ef4dc4f2b1acad85a9569b7ef Mon Sep 17 00:00:00 2001
From: Jan Brasna <1784648+janbrasna@users.noreply.github.com>
Date: Sun, 18 Jan 2026 02:27:55 +0100
Subject: [PATCH 1/2] Support cover in at2x mixin

---
 assets/sass/protocol/includes/mixins/_at2x.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/assets/sass/protocol/includes/mixins/_at2x.scss b/assets/sass/protocol/includes/mixins/_at2x.scss
index 60461f87d..ba9034be4 100644
--- a/assets/sass/protocol/includes/mixins/_at2x.scss
+++ b/assets/sass/protocol/includes/mixins/_at2x.scss
@@ -10,13 +10,16 @@
 //  example.png
 //  example-high-res.png
 // Usage:
-//  @include at2x('/media/img/foo.png', 100px, 100px);
+//  @include at2x('/media/img/example.png', 100px, 100px);
+//  @include at2x('/media/img/example.jpg', auto, 200px);
+//  @include at2x('/media/img/example.avif', 25%);
+//  @include at2x('/media/img/example.webp', contain);
 
 @mixin at2x($path, $w: auto, $h: auto) {
     $hr-suffix: '-high-res';
 
-    // Do not set height to auto if width is contain
-    @if $w == 'contain' {
+    // Do not set height if `contain` or `cover` is passed as the first param
+    @if $w == 'contain' or $w == 'cover' {
         $h: #{''};
     }
 
@@ -28,7 +31,7 @@
     // Loop through the image path and find the position of
     // the dot to determine the file extension.
     // Subtract from string length to make an end point that
-    // is always lower than the start point s the loop always
+    // is always lower than the start point so the loop always
     // increments (10 is an arbitrary number).
     @for $i from $length through $length - 10 {
         @if $position == -1 {

From 2327837c0c1a1e7115e96cf78086567b1ffaef5d Mon Sep 17 00:00:00 2001
From: Jan Brasna <1784648+janbrasna@users.noreply.github.com>
Date: Sun, 18 Jan 2026 02:35:09 +0100
Subject: [PATCH 2/2] Update CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e0f0a643..0ccc253e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -38,6 +38,10 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 
 * To come in follow up PR.
 
+## Bug Fixes
+
+* **css:** at2x mixin doesn't support single keyword values (#751)
+
 ## Migration Tips
 
 See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for automated scripts (VS Code find/replace and terminal commands) to help with these changes.