<div class="wrapper">
  <h1>Top 20 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="20">
    <li>
      <img src="https://assets.codepen.io/85648/Arooj-Aftab.webp" alt="Arooj Aftab album cover" />
      <span>Arooj Aftab</span>
      <span>Vulture Prince</span>
    </li>
    <li>
      <span>Dave</span>
      <span>We’re All Alone in This Together</span>
    </li>
    <li>
      <span>Turnstile</span>
      <span>Glow On</span>
    </li>
    <li>
      <span>Tirzah</span>
      <span>Colourgrade</span>
    </li>
    <li>
      <img src="https://assets.codepen.io/85648/deafheaven.webp"  alt="deafheaven album cover"/>
      <span>Deafheaven</span>
      <span>Infinite Granite</span>
    </li>
    <li>
      <span>Nick Cave and Warren Ellis</span>
      <span>Carnage</span>
    </li>
    <li>
      <img src="https://assets.codepen.io/85648/lil-nas-x-2.jpg" alt="Lil Nas X album cover"/>
      <span>Lil Nas X</span>
      <span>Montero</span>
    </li>
    <li>
      <img src="https://assets.codepen.io/85648/japanese-breakfast.webp" alt="Japanese Breakfast album cover" />
      <span>Japanese Breakfast</span>
      <span>Jubilee</span>
    </li>
    <li>
      <span>Jazmine Sullivan</span>
      <span>Heaux Tales</span>
    </li>
    <li>
      <img src="https://assets.codepen.io/85648/sam-fender.webp"  alt="Sam Fender album cover"/>
      <span>Sam Fender</span>
      <span>Seventeen Going Under</span>
    </li>
  </ol>
  
  <section class="divider">
    <div class="wrapper">
      <h2>TicketStore</h2>
      <p>Thousands of tickets available now for the artists you love.</p>
      <a href="#0">Get tickets</a>
    </div>
  </section>
  
  <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;
}

:root {
  --pad: clamp(1rem, 2vw, 3rem);
}

img {
  width: 100%;
  display: block;
}

body {
  margin: 0;
  padding: var(--pad) 0;
  font-family: "Open Sans", sans-serif;
}

a {
  color: inherit;
}

.wrapper {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.wrapper > * + * {
  margin-top: var(--pad);
}

ol {
  list-style: none;
  padding: 1.5rem;
  border: 0.1rem solid lightgrey;
  columns: 16rem;
  column-gap: calc(var(--pad) * 2);
  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;
}

.divider {
  background: lavender;
  min-height: 6rem;
  padding: var(--pad) 0;
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.divider a {
  text-decoration: none;
  display: inline-block;
  background: turquoise;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}

h1 {
  font-size: clamp(1.5rem, 1vw + 2rem, 3.5rem);
}

h2 {
  font-size: clamp(1.3rem, 1vw + 1.6rem, 3rem);
  margin: 0;
}

.divider * + * {
  margin: 1.5rem 0 0 0;
}

.divider p {
  font-size: 1.4rem;
}