
div {
	@media (400px < width < 700px) {
		color: red;

		> span {
			color: blue;
		}

		& .class {
			background: #0a3FE1;
		}

		.class {
			color: green;
		}

		@supports (display: grid) {
			color: red;

			> span {
				color: blue;
			}

			& .class {
				background: #0a3FE1;
			}

			.class {
				color: green;
			}
		}
	}
}

span {
	@supports (display: grid) {
		color: red;

		> span {
			color: blue;
		}

		& .class {
			background: #0a3FE1;
		}

		.class {
			color: green;
		}

		@media (400px < width < 700px) {
			color: red;

			> span {
				color: blue;
			}

			& .class {
				background: #0a3FE1;
			}

			.class {
				color: green;
			}
		}
	}
}


.class {
	@layer theme {
		color: red;

		> span {
			color: blue;
		}

		& .class {
			background: #0a3FE1;
		}

		.class {
			color: green;
		}

		@media (400px < width < 700px) {
			color: red;

			> span {
				color: blue;
			}

			& .class {
				background: #0a3FE1;
			}

			.class {
				color: green;
			}
		}
	}
}

:host {
	@scope (.media-object) to (.content > *) {
		border-radius: 50%;
		padding: 1em;

		> span {
			color: blue;
		}

		& .class {
			background: #0a3FE1;
		}

		.class {
			color: green;
		}

		@media (400px < width < 700px) {
			color: red;

			> span {
				color: blue;
			}

			& .class {
				background: #0a3FE1;
			}

			.class {
				color: green;
			}
		}
	}
}

::slotted(   span   ) {
	@container card (inline-size > 30em) and (inline-size < 45em) {
		border-radius: 50%;
		padding: 1em;

		> span {
			color: blue;
		}

		& .class {
			background: #0a3FE1;
		}

		.class {
			color: green;
		}

		@media (400px < width < 700px) {
			color: red;

			> span {
				color: blue;
			}

			& .class {
				background: #0a3FE1;
			}

			.class {
				color: green;
			}
		}
	}
}
