<!--source: https://www.theguardian.com/music/2021/nov/30/the-50-best-albums-of-2021-->
<div class="wrapper">
<h1>Top 10 albums of 2021</h1>
<cite>Source: <a href="https://www.theguardian.com/music/2021/nov/30/the-50-best-albums-of-2021">The Guardian</a></cite>
<ol reversed>
<li>
<span>Mdou Moctar</span>
<span>Afrique Victime</span>
</li>
<li>
<span>Arlo Parks</span>
<span>Collapsed in Sunbeams</span>
</li>
<li>
<span>Olivia Rodrigo</span>
<span>Sour</span>
</li>
<li>
<span>Dry Cleaning</span>
<span>New Long Leg</span>
</li>
<li>
<span>Sault</span>
<span>Nine</span>
</li>
<li>
<span>Tyler, the Creator</span>
<span>Call Me If You Get Lost</span>
</li>
<li>
<span>The Weather Station</span>
<span>Ignorance</span>
</li>
<li>
<span>Little Simz</span>
<span>Sometimes I Might Be Introvert</span>
</li>
<li>
<span>Wolf Alice</span>
<span>Blue Weekend</span>
</li>
<li>
<span>Self Esteem</span>
<span>Prioritise Pleasure</span>
</li>
</ol>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: clamp(1rem, 2vw, 3rem);
font-family: "Open Sans", sans-serif;
font-size: 1.1rem;
}
a {
color: inherit;
}
.wrapper {
max-width: 80rem;
margin: 0 auto;
}
ol {
padding: 1.5rem 1.5rem 1.5rem 4em;
border: 0.3rem solid turquoise;
columns: 15rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
border-radius: 0.5rem;
}
ol > * + * {
margin-top: 1rem;
}
li {
/* break-inside: avoid; */
}
::marker {
content: counters(list-item, '') ': ';
font-weight: 700;
font-size: 1.5em;
color: turquoise;
}
li span {
display: block;
}
li span:first-child {
font-size: 1.5em;
}
li span:last-child {
font-style: italic;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.