tweeked floating image style

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

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;
 		}