<commit_before>//--------------------------------------------------
// mixins
//--------------------------------------------------
@mixin card-stats-padding {
  padding: rem-calc(28 30); 
}

@mixin card-stats-number {
  color: $primary;
  font-weight: $bold;
  line-height: 1;
}

//--------------------------------------------------
// classes
//--------------------------------------------------
&--stats-wrapper {
  display: flex;
  flex-wrap: wrap;

  @include breakpoint($small) { 
    flex-wrap: nowrap;
    justify-content: space-between; 
  }
}

&--stats {
  @include card-stats-padding;
  background-color: $white;
  margin-top: rem-calc(30);

  &--half {
    @include responsive(width, 100%, calc(50% - 15px), calc(50% - 15px));
  }

  .card {

    h2 {
      font-size: rem-calc(20);
    }

    &__content {
      @include flex;
    }

    &__logos {
      @include flex;
      @include ul-unstyled;
    }

      &__logo {
        margin-left: rem-calc(24);

        &:first-child { margin-left: 0; }
      }

        &__logo-image {
          
          width: rem-calc(100); height: auto;

          display: block;
        }

    &__third {
      width: calc(33% - 16px);
    }

      &__chart-square {
        margin-right: rem-calc(24);
        width: 30%;
      }

      &__stat-box {
        @include bg-grey-xdark;
        @include flex;
        @include flex-center;
        font-size: rem-calc(20);
        font-weight: $bold;
        margin-right: rem-calc(20);
        width: 30%; height: rem-calc(280);
      }

      

      
  }
}

&--stats-overview {
  @include bg-grey-black;
  @include card-stats-padding;
  @include responsive(width, 100%, 33%, 33%);
  margin-right: rem-calc(30);

  .card {
    &__flag {
      margin-right: rem-calc(14);
    }

    &__heading {
      @include flex;
      @include flex-v-center;
      margin-bottom: rem-calc(18);
    }

    &__h1 { 
      color: $white;
      @include responsive(font-size, rem-calc(20), rem-calc(22), rem-calc(30));
      margin: 0;
    }

    &__number {
      @include card-stats-number;
      @include responsive(font-size, rem-calc(18), rem-calc(20), rem-calc(30));

      display: block;
    }

    &__number--small {
      @include card-stats-number;
      @include responsive(font-size, rem-calc(18), rem-calc(20), rem-calc(30));
      margin-right: rem-calc(10);
    }

    &__section {
      margin-top: rem-calc(30);
    }

    &__story-map-links {<commit_msg>Replace responsive mixin with the normal breakpoint ones<commit_after>//--------------------------------------------------
// mixins
//--------------------------------------------------
@mixin card-stats-padding {
  padding: rem-calc(28 30); 
}

@mixin card-stats-number {
  color: $primary;
  font-weight: $bold;
  line-height: 1;
}

//--------------------------------------------------
// classes
//--------------------------------------------------
&--stats-wrapper {
  display: flex;
  flex-wrap: wrap;

  @include breakpoint($small) { 
    flex-wrap: nowrap;
    justify-content: space-between; 
  }
}

&--stats {
  @include card-stats-padding;
  background-color: $white;
  margin-top: rem-calc(30);

  &--half {
    width: 100%; 

    @include breakpoint($small) { width: calc(50% - 15px); }
  }

  .card {

    h2 {
      font-size: rem-calc(20);
    }

    &__content {
      @include flex;
    }

    &__logos {
      @include flex;
      @include ul-unstyled;
    }

      &__logo {
        margin-left: rem-calc(24);

        &:first-child { margin-left: 0; }
      }

        &__logo-image {
          
          width: rem-calc(100); height: auto;

          display: block;
        }

    &__third {
      width: calc(33% - 16px);
    }

      &__chart-square {
        margin-right: rem-calc(24);
        width: 30%;
      }

      &__stat-box {
        @include bg-grey-xdark;
        @include flex;
        @include flex-center;
        font-size: rem-calc(20);
        font-weight: $bold;
        margin-right: rem-calc(20);
        width: 30%; height: rem-calc(280);
      }
  }
}

&--stats-overview {
  @include bg-grey-black;
  @include card-stats-padding;
  margin-right: rem-calc(30);
  width: 100%;

  @include breakpoint($small) { width: 33%; }

  .card {
    &__flag {
      margin-right: rem-calc(14);
    }

    &__heading {
      @include flex;
      @include flex-v-center;
      margin-bottom: rem-calc(18);
    }

    &__h1 { 
      color: $white;
      font-size: rem-calc(20);
      margin: 0;

      @include breakpoint($small) { font-size: rem-calc(22); }
      @include breakpoint($small) { font-size: rem-calc(30); }
    }

    &__number {
      @include card-stats-number;
      font-size: rem-calc(18);

      display: block;

      @include breakpoint($small) { font-size: rem-calc(20); }
      @include breakpoint($small) { font-size: rem-calc(40); }
    }

    &__number--small {
      @include card-stats-number;
      font-size: rem-calc(18);
      margin-right: rem-calc(10);

      @include breakpoint($small) { font-size: rem-calc(20); }
      @include breakpoint($small) { font-size: rem-calc(30); }
    }

    &__section {
      margin-top: rem-calc(30);
    }

    &__story-map-links {
{'fraction_non_alphanumeric': 0.22654594490464264, 'fraction_numerical': 0.030052013099595452, 'mean_word_length': 1.5728444003964321, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5323837', 'n_tokens_mistral': 1872, 'n_tokens_neox': 1703, 'n_words': 323}