/* The page's opening row: the trail, heading and standfirst on one side, the
   price calculator on the other.

   Values are the legacy `assets/scss/trade-analyz.scss`'s `.header-section`.
   `justify-items: start` is what keeps the text block shrink-wrapped to its
   heading rather than stretched across the column, which is what puts the
   calculator beside a 528px paragraph and not a 788px one. */
.crypto-intro {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 36px;
  margin: 32px 0;
}

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

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

@media (min-width: 1000px) {
  .crypto-intro {
    grid-template-columns: 1fr max-content;
  }

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