/*
 * Note this is not official CSS yet.
 * See (W3C working draft): https://www.w3.org/TR/css-nesting-1/
 */

.CLASS-1 {
	color: blue;
	& > .CLASS-2 { color: red }
}

.CLASS-1 {
	color: blue;
	&.CLASS-2 { color: red }
}

.CLASS-1, .CLASS-2 {
	color: blue;
	& + .CLASS-3, &.CLASS-4 { color: red }
}

.CLASS-1 {
	color: blue;
	& .CLASS-2 & .CLASS-3 & .CLASS-4 { color: red }
}

.CLASS-1 {
	color: blue;
	& { padding: 2ch }
}

.CLASS-1 {
	color: blue;
	&& { padding: 2ch }
}

.CLASS-5, #ID-1 {
	&:hover > .CLASS-3 { color: red }
}

.CLASS-1 {
	&:is(.CLASS-2, &.CLASS-3) { color: red }
}

figure {
	margin: 0;

	& > figcaption {
		background: hsl(0 0% 0% / 50%);

		& > p {
			font-size: .9rem;
		}
	}
}


.CLASS-1 {
	color: red;
	@nest & > .CLASS-2 {
		color: blue;
	}
}

.CLASS-1 {
	color: red;
	@nest .parent & {
		color: blue;
	}
}

.CLASS-1 {
	color: red;
	@nest :not(&) {
		color: blue;
	}
}

.CLASS-1 {
	color: blue;
	@nest .CLASS-2 & {
		color: red;
		&.CLASS-3 {
			color: green;
		}
	}
}


.CLASS-1 {
	display: grid;

	@media (orientation: landscape) {
		grid-auto-flow: column;
	}
}

.CLASS-1 {
	display: grid;

	@media (orientation: landscape) {
		grid-auto-flow: column;

		@media (min-inline-size > 1024px) {
			max-inline-size: 1024px;
		}
	}
}