diff --git a/Libraries/LibWeb/CSS/MediaQuery.cpp b/Libraries/LibWeb/CSS/MediaQuery.cpp
index 1b36971a34e..87cd73a854a 100644
--- a/Libraries/LibWeb/CSS/MediaQuery.cpp
+++ b/Libraries/LibWeb/CSS/MediaQuery.cpp
@@ -68,16 +68,18 @@ String MediaFeature::to_string() const
     case Type::IsTrue:
         return MUST(String::from_utf8(string_from_media_feature_id(m_id)));
     case Type::ExactValue:
-        return MUST(String::formatted("{}: {}", string_from_media_feature_id(m_id), m_value->to_string()));
+        return MUST(String::formatted("{}: {}", string_from_media_feature_id(m_id), value().to_string()));
     case Type::MinValue:
-        return MUST(String::formatted("min-{}: {}", string_from_media_feature_id(m_id), m_value->to_string()));
+        return MUST(String::formatted("min-{}: {}", string_from_media_feature_id(m_id), value().to_string()));
     case Type::MaxValue:
-        return MUST(String::formatted("max-{}: {}", string_from_media_feature_id(m_id), m_value->to_string()));
-    case Type::Range:
-        if (!m_range->right_comparison.has_value())
-            return MUST(String::formatted("{} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), string_from_media_feature_id(m_id)));
+        return MUST(String::formatted("max-{}: {}", string_from_media_feature_id(m_id), value().to_string()));
+    case Type::Range: {
+        auto& range = this->range();
+        if (!range.right_comparison.has_value())
+            return MUST(String::formatted("{} {} {}", range.left_value.to_string(), comparison_string(range.left_comparison), string_from_media_feature_id(m_id)));
 
-        return MUST(String::formatted("{} {} {} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), string_from_media_feature_id(m_id), comparison_string(*m_range->right_comparison), m_range->right_value->to_string()));
+        return MUST(String::formatted("{} {} {} {} {}", range.left_value.to_string(), comparison_string(range.left_comparison), string_from_media_feature_id(m_id), comparison_string(*range.right_comparison), range.right_value->to_string()));
+    }
     }
 
     VERIFY_NOT_REACHED();
@@ -118,24 +120,26 @@ MatchResult MediaFeature::evaluate(HTML::Window const* window) const
         return MatchResult::False;
 
     case Type::ExactValue:
-        return as_match_result(compare(*window, *m_value, Comparison::Equal, queried_value));
+        return as_match_result(compare(*window, value(), Comparison::Equal, queried_value));
 
     case Type::MinValue:
-        return as_match_result(compare(*window, queried_value, Comparison::GreaterThanOrEqual, *m_value));
+        return as_match_result(compare(*window, queried_value, Comparison::GreaterThanOrEqual, value()));
 
     case Type::MaxValue:
-        return as_match_result(compare(*window, queried_value, Comparison::LessThanOrEqual, *m_value));
+        return as_match_result(compare(*window, queried_value, Comparison::LessThanOrEqual, value()));
 
-    case Type::Range:
-        if (!compare(*window, m_range->left_value, m_range->left_comparison, queried_value))
+    case Type::Range: {
+        auto& range = this->range();
+        if (!compare(*window, range.left_value, range.left_comparison, queried_value))
             return MatchResult::False;
 
-        if (m_range->right_comparison.has_value())
-            if (!compare(*window, queried_value, *m_range->right_comparison, *m_range->right_value))
+        if (range.right_comparison.has_value())
+            if (!compare(*window, queried_value, *range.right_comparison, *range.right_value))
                 return MatchResult::False;
 
         return MatchResult::True;
     }
+    }
 
     VERIFY_NOT_REACHED();
 }
diff --git a/Libraries/LibWeb/CSS/MediaQuery.h b/Libraries/LibWeb/CSS/MediaQuery.h
index 0e2e84e43b1..2035c9a5073 100644
--- a/Libraries/LibWeb/CSS/MediaQuery.h
+++ b/Libraries/LibWeb/CSS/MediaQuery.h
@@ -127,25 +127,23 @@ public:
     // Corresponds to `<mf-range>` grammar, with a single comparison
     static NonnullOwnPtr<MediaFeature> half_range(MediaFeatureValue value, Comparison comparison, MediaFeatureID id)
     {
-        auto feature = adopt_own(*new MediaFeature(Type::Range, id));
-        feature->m_range = Range {
-            .left_value = move(value),
-            .left_comparison = comparison,
-        };
-        return feature;
+        return adopt_own(*new MediaFeature(Type::Range, id,
+            Range {
+                .left_value = move(value),
+                .left_comparison = comparison,
+            }));
     }
 
     // Corresponds to `<mf-range>` grammar, with two comparisons
     static NonnullOwnPtr<MediaFeature> range(MediaFeatureValue left_value, Comparison left_comparison, MediaFeatureID id, Comparison right_comparison, MediaFeatureValue right_value)
     {
-        auto feature = adopt_own(*new MediaFeature(Type::Range, id));
-        feature->m_range = Range {
-            .left_value = move(left_value),
-            .left_comparison = left_comparison,
-            .right_comparison = right_comparison,
-            .right_value = move(right_value),
-        };
-        return feature;
+        return adopt_own(*new MediaFeature(Type::Range, id,
+            Range {
+                .left_value = move(left_value),
+                .left_comparison = left_comparison,
+                .right_comparison = right_comparison,
+                .right_value = move(right_value),
+            }));
     }
 
     virtual MatchResult evaluate(HTML::Window const*) const override;
@@ -161,15 +159,6 @@ private:
         Range,
     };
 
-    MediaFeature(Type type, MediaFeatureID id, Optional<MediaFeatureValue> value = {})
-        : m_type(type)
-        , m_id(move(id))
-        , m_value(move(value))
-    {
-    }
-
-    static bool compare(HTML::Window const& window, MediaFeatureValue left, Comparison comparison, MediaFeatureValue right);
-
     struct Range {
         MediaFeatureValue left_value;
         Comparison left_comparison;
@@ -177,10 +166,20 @@ private:
         Optional<MediaFeatureValue> right_value {};
     };
 
+    MediaFeature(Type type, MediaFeatureID id, Variant<Empty, MediaFeatureValue, Range> value = {})
+        : m_type(type)
+        , m_id(move(id))
+        , m_value(move(value))
+    {
+    }
+
+    static bool compare(HTML::Window const& window, MediaFeatureValue left, Comparison comparison, MediaFeatureValue right);
+    MediaFeatureValue const& value() const { return m_value.get<MediaFeatureValue>(); }
+    Range const& range() const { return m_value.get<Range>(); }
+
     Type m_type;
     MediaFeatureID m_id;
-    Optional<MediaFeatureValue> m_value {};
-    Optional<Range> m_range {};
+    Variant<Empty, MediaFeatureValue, Range> m_value {};
 };
 
 class MediaQuery : public RefCounted<MediaQuery> {