.playhead {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(104px, 15vh, 150px) var(--gutter) clamp(32px, 6vh, 56px);
}

.playhead__title {
  margin-bottom: 18px;
  font: 400 clamp(52px, 10vw, 156px)/.92 var(--display);
}

.playhead__sub {
  max-width: 48ch;
  margin-bottom: 28px;
  font-size: clamp(17px, 1.5vw, 21px);
}

.genres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 20px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.genre {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 4 / 5;
  padding: 20px;
  border-radius: 32px;
  background: var(--tile-bg);
  color: var(--tile-ink);
}
.genre svg { flex: 1; min-height: 0; width: 100%; }
.genre h3 { margin-top: 10px; font: 400 28px/1.05 var(--display); }
.genre p { margin-top: 4px; font-size: 16px; line-height: 1.35; }
.genre__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tile-ink);
  color: var(--tile-bg);
  font: 700 13px/1 var(--body);
}

.round {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(56px, 10vh, 120px) var(--gutter) clamp(64px, 11vh, 130px);
}
.round h2 { margin-bottom: 28px; font: 400 clamp(32px, 4.6vw, 64px)/1 var(--display); }
.round__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 28px clamp(24px, 4vw, 56px);
}
.round__steps li { padding-top: 18px; border-top: 3px solid var(--bottle); }
.round__steps h3 { margin-bottom: 8px; font: 800 22px/1.2 var(--body); letter-spacing: -.015em; }
.round__steps p { max-width: 34ch; }