diff --git a/responsive.go b/responsive.go
index ccd3a62..960b69b 100644
--- a/responsive.go
+++ b/responsive.go
@@ -43,6 +43,7 @@ func (r *Responsive) Variant(name string, layout *Layout) *Responsive {
 
 // Add registers a responsive variant. The optional media argument carries a
 // CSS media-query hint for downstream CSS generation (e.g. "(min-width: 768px)").
+// When supplied, Render emits it on the container as data-media.
 //
 // Usage example: NewResponsive().Add("desktop", NewLayout("HLCRF"), "(min-width: 1024px)")
 func (r *Responsive) Add(name string, layout *Layout, media ...string) *Responsive {
@@ -79,6 +80,10 @@ func (r *Responsive) renderWithLayoutPath(ctx *Context, path string) string {
 
 		b.WriteString(`<div data-variant="`)
 		b.WriteString(escapeAttr(v.name))
+		if v.media != "" {
+			b.WriteString(`" data-media="`)
+			b.WriteString(escapeAttr(v.media))
+		}
 		b.WriteString(`">`)
 		b.WriteString(renderWithLayoutPath(v.layout, ctx, path))
 		b.WriteString(`</div>`)
diff --git a/responsive_test.go b/responsive_test.go
index 8b0b07f..cc6649e 100644
--- a/responsive_test.go
+++ b/responsive_test.go
@@ -19,6 +19,21 @@ func TestResponsive_SingleVariant_Good(t *testing.T) {
 	}
 }
 
+func TestResponsive_Add_MediaHint_Good(t *testing.T) {
+	ctx := NewContext()
+	r := NewResponsive().
+		Add("desktop", NewLayout("C").C(Raw("content")), "(min-width: 1024px)")
+
+	got := r.Render(ctx)
+
+	if !containsText(got, `data-variant="desktop"`) {
+		t.Fatalf("responsive should still contain data-variant, got:\n%s", got)
+	}
+	if !containsText(got, `data-media="(min-width: 1024px)"`) {
+		t.Fatalf("responsive should expose media hint, got:\n%s", got)
+	}
+}
+
 func TestResponsive_MultiVariant_Good(t *testing.T) {
 	ctx := NewContext()
 	r := NewResponsive().