.topics {
  padding-block: clamp(76px, 9vw, 132px);
  background: radial-gradient(ellipse at 75% 0%, #60182b 0%, transparent 62%), var(--wine);
  color: var(--cream);
}

.topics-heading {
  max-width: 740px;
  margin-bottom: clamp(40px, 5vw, 66px);
}

.topics .display-heading {
  max-width: 12.5em;
  color: var(--cream);
  font-size: clamp(45px, 6.4vw, 87px);
  text-wrap: balance;
}

.topics-intro {
  max-width: 580px;
  margin-top: 23px;
  color: #e5cdd1;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.7;
}

.topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px clamp(34px, 6vw, 90px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(13px, 1.8vw, 25px);
  align-items: start;
}

.topic-seal {
  display: grid;
  place-items: center;
  width: clamp(54px, 6vw, 74px);
  aspect-ratio: 1;
  color: #3c1c10;
  background: url('assets/topic-seal.png') center / contain no-repeat;
  font: 600 clamp(21px, 2.25vw, 27px)/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 1px 1px #fff4cf80;
  user-select: none;
}

.topic-entry h3 {
  margin: 4px 0 9px;
  color: var(--cream);
  font: 500 clamp(27px, 3.15vw, 42px)/1.06 var(--serif);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

.topic-entry p {
  max-width: 38ch;
  color: #e5cdd1;
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .topics { padding-block: 65px 72px; }
  .topics .display-heading { font-size: clamp(37px, 9.5vw, 58px); }
  .topics-intro { margin-top: 18px; }
  .topic-list { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .topic-entry h3 { margin-top: 3px; }
}