@charset "UTF-8";
/* Карточка «заголовок + текст + крупный номер» (белая, r 16). Номер внизу — H1 --color-black-8.
   Шаги (база): высота 192 / 280 / 320, поля 16 / 16 / 24, заголовок H3, до текста 12 / 16 / 24.
   --large (программа): заголовок H2, текст через 24 / 20 / 20, поля 16 / 20 / 20, высота 360 / 400 с md;
   на телефоне — по содержимому, номер в строку с заголовком справа (H2, --color-black-20).
   Высота — min-height: длинный текст не обрезается. */
.number-card {
  display: grid;
  grid-template-areas: "title" "text" "number";
  grid-template-rows: auto auto 1fr;
  min-height: 12rem;
  padding: 1rem;
  color: var(--color-black-pale);
  background-color: var(--color-white);
  border-radius: var(--radius-16);
}
@media (min-width: 768px) {
  .number-card {
    min-height: 17.5rem;
  }
}
@media (min-width: 1280px) {
  .number-card {
    min-height: 20rem;
    padding: 1.5rem;
  }
}
.number-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1;
}
@media (min-width: 1280px) {
  .number-card__title {
    font-size: 2rem;
  }
}
.number-card__title {
  grid-area: title;
  color: var(--color-black);
}
.number-card__text {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 1280px) {
  .number-card__text {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.number-card__text {
  grid-area: text;
  margin-top: 0.75rem;
}
@media (min-width: 768px) {
  .number-card__text {
    margin-top: 1rem;
  }
}
@media (min-width: 1280px) {
  .number-card__text {
    margin-top: 1.5rem;
  }
}
.number-card__number {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 4rem;
  line-height: 0.85;
}
@media (min-width: 768px) {
  .number-card__number {
    font-size: 5.5rem;
    line-height: 0.86;
  }
}
@media (min-width: 1280px) {
  .number-card__number {
    font-size: 7.5rem;
    line-height: 0.85;
  }
}
.number-card__number {
  grid-area: number;
  align-self: end;
  margin-top: 1rem;
  color: var(--color-black-8);
}
.number-card--large {
  grid-template-areas: "title number" "text text";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  min-height: 0;
}
@media (min-width: 768px) {
  .number-card--large {
    grid-template-areas: "title" "text" "number";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    min-height: 22.5rem;
    padding: 1.25rem;
  }
}
@media (min-width: 1280px) {
  .number-card--large {
    min-height: 25rem;
  }
}
.number-card--large .number-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 0.96;
}
@media (min-width: 768px) {
  .number-card--large .number-card__title {
    font-size: 3.5rem;
    line-height: 0.92;
  }
}
@media (min-width: 1280px) {
  .number-card--large .number-card__title {
    font-size: 4rem;
    line-height: 0.94;
  }
}
.number-card--large .number-card__title {
  color: inherit;
}
.number-card--large .number-card__text {
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .number-card--large .number-card__text {
    margin-top: 1.25rem;
  }
}
.number-card--large .number-card__number {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 0.96;
}
@media (min-width: 768px) {
  .number-card--large .number-card__number {
    font-size: 3.5rem;
    line-height: 0.92;
  }
}
@media (min-width: 1280px) {
  .number-card--large .number-card__number {
    font-size: 4rem;
    line-height: 0.94;
  }
}
.number-card--large .number-card__number {
  align-self: start;
  margin-top: 0;
  margin-left: 1rem;
  color: var(--color-black-20);
}
@media (min-width: 768px) {
  .number-card--large .number-card__number {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 4rem;
    line-height: 0.85;
    align-self: end;
    margin-top: 1rem;
    margin-left: 0;
    color: var(--color-black-8);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .number-card--large .number-card__number {
    font-size: 5.5rem;
    line-height: 0.86;
  }
}
@media (min-width: 768px) and (min-width: 1280px) {
  .number-card--large .number-card__number {
    font-size: 7.5rem;
    line-height: 0.85;
  }
}