.numbers-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  color: var(--color-petrol);

  >h2 {
    color: var(--color-petrol);
    margin: 0 0 3rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .numbers-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
  }

  .number-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .number-tile .top-text {
    font-size: 1.125rem;
    color: var(--color-petrol);
    line-height: 1.3;
  }

  .number-tile .number-text {
    display: flex;
    align-items: baseline;
    gap: 0.28em;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0.1rem 0;
  }

  .number-tile .number {
    font-size: 4.375rem;
    color: var(--color-petrol);
  }

  .number-tile .text-after-number {
    font-size: 2.5rem;
    color: var(--color-petrol);
  }

  .number-tile .bottom-text {
    font-size: 1.125rem;
    color: var(--color-petrol);
    line-height: 1.3;
  }
}

.numbers-section.two-columns {
  >h2 {
    margin: 0 0 1rem;
  }

  >p {
    color: var(--color-primary-text);
    font-size: 18px;
    margin: 0 0 3rem;
  }

  .numbers-tiles {
    grid-template-columns: repeat(2, 1fr);

    .bottom-text {
      font-size: 2.25rem;
    }

    .description-text {
      color: var(--color-primary-text);
    }
  }
}

.numbers-section,
.numbers-section.two-columns {
  @media (max-width: 707px) {
    .numbers-tiles {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }

    .number-tile .number {
      font-size: 3.25rem;
    }

    .number-tile .text-after-number {
      font-size: 1.875rem;
    }
  }

  @media (min-width: 708px) and (max-width: 1023px) {
    .number-tile .number {
      font-size: 3.75rem;
    }

    .number-tile .text-after-number {
      font-size: 2.25rem;
    }
  }
}