/* Styles for invest-step.hbs — one step of the how-to-invest strip.
   Ported from the legacy `howToInvestment/HowToInvestmentItem.vue`. */

/* `align-self: start` is what stops the three from stretching to the tallest of
   them, so each one's picture sits on the same line whatever its copy runs to. */
.crypto-invest-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  margin-bottom: 16px;
}

.crypto-invest-step:last-child {
  margin-bottom: 0;
}

.crypto-invest-step-icon {
  width: 80px;
  height: 80px;
  margin-top: 16px;
}

.crypto-invest-step-title {
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.crypto-invest-step-text {
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

/* Reserves the two outer steps the height their copy needs at the width where
   the three sit side by side, so the arrows between them stay on the picture
   line. The legacy writes this twice, as 890-958 and as 958-up; the two rules
   are identical and the pair is one range. */
@media (min-width: 890px) {
  .crypto-invest-step:first-child .crypto-invest-step-text,
  .crypto-invest-step:last-child .crypto-invest-step-text {
    min-height: 110px;
  }
}

@media (min-width: 1000px) {
  /* The row's gap does the spacing once they are side by side. The middle step
     keeps its margin: the legacy clears only the first and the last. */
  .crypto-invest-step:first-child {
    margin-bottom: 0;
  }

  .crypto-invest-step-title {
    font-size: 20px;
  }

  .crypto-invest-step-text {
    font-size: 16px;
  }
}