From afe8b95c203bfad7d530eccec6951a78f87c325e Mon Sep 17 00:00:00 2001
From: Egor Kloos <egor.kloos@ns.nl>
Date: Tue, 9 Jan 2024 09:29:00 +0100
Subject: [PATCH] tweeked floating image style

---
 index.html               | 18 +++++++++++++++++-
 src/system-selectors.css |  9 +++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index c15bbb4..01ca740 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,23 @@ <h4>Heading 4</h4>
 				dicta eum facere hic tempore!
 			</p>
 			<h5>Heading 5</h5>
-			<p>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+
+			<p>
+				<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
+					<rect width="400" height="300" fill="var(--system-surface-color)"></rect>
+					<text
+						x="50%"
+						y="50%"
+						dominant-baseline="middle"
+						text-anchor="middle"
+						font-family="system-ui"
+						font-size="2em"
+						fill="var(--system-gray-text)"
+					>
+						Aspect Ratio 4:3
+					</text></svg
+				>This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit.
+			</p>
 			<p>
 				This is more paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet
 				architecto aspernatur atque aut consequuntur dicta dolore eligendi fugit harum labore maxime, nulla
diff --git a/src/system-selectors.css b/src/system-selectors.css
index 92df003..d41105d 100644
--- a/src/system-selectors.css
+++ b/src/system-selectors.css
@@ -390,13 +390,14 @@
 		max-inline-size: 100%;
 		block-size: auto;
 	}
-	main :is(img, picture, svg) {
+	:is(p, li, td, dd) > :is(img, picture, svg) {
 		float: inline-end;
-		margin-inline-start: var(--system-spacing-main-inline);
-		max-inline-size: 30cqw;
+		margin-inline-start: var(--system-spacing-column-gap);
+		margin-block-end: var(--system-spacing-element-block);
+		max-inline-size: 36cqw;
 	}
 	@container --content (width < 42ch) {
-		main :is(img, picture, svg) {
+		:is(p, li, dd, td) > :is(img, picture, svg) {
 			width: 100%;
 			max-inline-size: unset;
 		}