/* The page's opening row: the trail, heading and standfirst.

   Values are the legacy `assets/scss/tokens-analyz.scss`'s `.header-section`,
   which is byte-identical to the crypto-buy page's. The rules are restated here
   rather than shared: the two blocks hold different elements — this one has no
   calculator beside it — and a shared stylesheet for one `<h1>` and one `<p>`
   would be three files where one will do. */
.crypto-price-intro {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 36px;
  margin: 32px 0;
}

.crypto-price-intro-title {
  margin-bottom: 16px;
  color: var(--gray-900);
  font-size: 21px;
  font-weight: 700;
  text-align: start;
}

.crypto-price-intro-subtitle {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
}

@media (min-width: 1000px) {
  /* `max-content` in the second track with nothing in it leaves the text column
     shrink-wrapped exactly as it is on `/crypto-buy/`, where the calculator
     fills it. */
  .crypto-price-intro {
    grid-template-columns: 1fr max-content;
  }

  .crypto-price-intro-title {
    font-size: 28px;
  }
}