<!--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 start="10">
<li>
<span>Mdou Moctar</span>
<span>Afrique Victime</span>
</li>
<li>
<img src="https://assets.codepen.io/85648/arlo-parks.jpg" alt="Arlo Parks album cover" />
<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>
<img src="https://assets.codepen.io/85648/weather-station.webp" alt="the weather station album cover" />
<span>The Weather Station</span>
<span>Ignorance</span>
</li>
<li>
<span>Little Simz</span>
<span>Sometimes I Might Be Introvert</span>
</li>
<li>
<img src="https://assets.codepen.io/85648/wolf-alice.webp" / alt="Wolf Alic album cover">
<span>Wolf Alice</span>
<span>Blue Weekend</span>
</li>
<li>
<img src="https://assets.codepen.io/85648/self-esteem.jpg" alt="Self Esteem album cover"/>
<span>Self Esteem</span>
<span>Prioritise Pleasure</span>
</li>
</ol>
</div>
* {
box-sizing: border-box;
}
img {
width: 100%;
display: block;
}
body {
margin: 0;
padding: clamp(1rem, 2vw, 3rem);
font-family: "Open Sans", sans-serif;
}
a {
color: inherit;
}
.wrapper {
max-width: 80rem;
margin: 0 auto;
}
ol {
list-style: none;
padding: 1.5rem;
border: 0.1rem solid lightgrey;
columns: 20rem;
column-gap: 4rem;
column-rule: 0.2rem dotted turquoise;
border-radius: 0.5rem;
}
li {
--y: calc(100% - 2rem);
display: grid;
grid-template-columns: minmax(3.75em, auto) 1fr;
gap: 0 0.5em;
break-inside: avoid;
page-break-inside: avoid;
background: radial-gradient(circle at 30% var(--y), rgb(50 50 50), rgb(0 0 0));
color: white;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0.25rem 0.25rem 0.5rem rgb(0 0 0 / 0.17)
}
li + li {
margin-top: 1rem;
}
li img {
grid-column: 1 / 3;
grid-row: 1;
aspect-ratio: 1.8;
object-fit: cover;
}
li::before {
counter-increment: list-item -1;
content: counter(list-item);
font-weight: 700;
font-size: 4.5em;
letter-spacing: -0.125em;
line-height: 1;
color: turquoise;
grid-column: 1;
grid-row: span 2;
align-self: end;
margin: 0 0 -0.15em -0.15em;
}
li span {
grid-column: 2;
}
li span:first-of-type {
font-size: 1.5em;
padding-top: 1rem;
}
li span:last-of-type {
font-style: italic;
padding-bottom: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.