<main>
	<figure>
		<img src="https://bittersmann.de/tmp/btra.jpg" alt="" aria-labelledby="caption"/>
		<figcaption id="caption">Parody of Bruce Springsteen’s <i>Born to Run</i> album cover, drawing by Annette Prüfer</figcaption>
	</figure>
	<ol>
		<li>Side A
			<ol>
				<li>Thunder Road</li>
				<li>Tenth Avenue Freeze-Out</li>
				<li>Night</li>
				<li>Backstreets</li>
			</ol>
		</li>
		<li>Side B
			<ol>
				<li>Born to Run</li>
				<li>She’s the One</li>
				<li>Meeting Across the River</li>
				<li>Jungleland</li>
			</ol>
		</li>
	</ol>
</main>
html
{
	font: 3vh/1.3 Helvetica Neue, Helvetica, Arial, sans-serif;
}

figure
{
	margin: 0;
}

figcaption
{
	font-weight: 100;
	max-width: 25em;
}

img
{
	max-width: 100%;
	max-height: 20rem;
	clip(0, 0, 1000px, 20px);
	overflow: hidden;
}

main > ol
{
	list-style: none;
	display: flex;
}

main > ol > li:not(:first-child)
{
	margin-left: 3rem;
}

ol ol
{
	font-weight: 100;
	padding: 0;
}

:root
{
	--error-color: red;
	--error-outline: 0.25rem solid var(--error-color);
}

ol > *:not(li)
{
	ERROR: ol must have only li children;
	outline: 0.25rem solid red;	
}

img:not([alt]),
img[alt=""]:not([role~="none"]):not([role~="presentation"]):not([aria-label]):not([aria-labelledby])
{
	ERROR: image must have alternative text;
	outline: var(--error-outline) !important;	
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.