.headline {
  display: grid;
  gap: var(--space-large);
  position: relative;
}

.headline header,
.headline article,
.headline figure {
  display: grid;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}

.headline header {
  gap: 2.5em;
  width: min(100%, 60em);
}

.headline header h1,
.headline header h2,
.headline header h3 {
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-x-tight);
  margin-bottom: -0.225em;
  margin-top: -0.3875em;
  text-wrap: balance;
}

.headline header h1 {
  font-size: var(--font-size-xxxxx-large);
}

.headline header h2 {
  font-size: var(--font-size-xxxx-large);
}

.headline header h3 {
  font-size: var(--font-size-xx-large);
}

.headline header p {
  font-size: var(--font-size-xx-large);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.2875em;
  margin-top: -0.4875em;
}

.headline header .quotation-marks {
  position: relative;
}

.headline header .quotation-marks:before {
  content: '“';
  position: absolute;
  right: 100%;
  top: 0;
}

.headline header .quotation-marks:after {
  content: '”';
  display: inline;
}

.headline article {
  gap: var(--space-large);
  width: min(100%, 56em);
}

.headline article p {
  font-size: var(--font-size-x-large);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: -0.375em;
  margin-top: -0.575em;
}

.headline figure {
  margin-block: var(--space-neutral);
  width: min(100%, 66em);
}