<commit_before>$product__image--width: 270px;
$product__image--height: 180px;
$product--padding: 1rem;

.product-intro {
  text-align: center;
  color: $dark_grey;
}


.product {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: .8em;
  padding: $product--padding;
  padding-top: 0;
  text-align: center;
  color: $white;
  // border-radius: 3px;
  &--citizens-notifications {
    $color: $notify--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/notifications.jpg") no-repeat;
    background-size: cover;
  }
  &--block-chain {
    $color: $reward--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/blockchain.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/collab-policy.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy-bar {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/barcelona.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy-mad {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/madrid.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy-rey {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/reykjavik.jpg") no-repeat;
    background-size: cover;
  }
  &--electronic-voting {
    $color: $vote--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/evote.jpg") no-repeat 50% 50%;
    background-size: cover;
  }
  &--open-auth {
    $color: $auth--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/open-auth.jpg") no-repeat;
    background-size: cover;
  }
  &--secure-notifications {
    $color: $auth--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/secure-notifications.jpg") no-repeat;
    background-size: cover;
  }

  @include width-from($medium_device) {
    margin: 0.4em;
    display: flex;
    flex: 1;
    justify-content: center;
    align-self: stretch;
    &--two-thirds {
      flex: 2;
    }
    &--full-width {
      flex-basis: 100%;
    }
  }

  &__text {
    @include width-from($medium_device) {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-right: 0.5rem;
      &--align-middle {
        align-self: center;
      }
    }
  }
  &__header {
      width: 100%;
      display: flex;
      flex-direction: row;
      }
  &__icon {
    @include width-from($large_device) {
      flex: 1;
      height: 45px;
      width: 35%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  &__icon--align-right {
    background-position: right;
    margin-right: 1em;
    height: 55px;
  }
}

.product__name {
  flex: 2;
  line-height: 1.1;
  font-family: $heading_title_font_family;
  letter-spacing: -0.02rem;
  @include font-size(24px);
  @include width-from($large_device) {
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    @include font-size(20px);
    &__medium-font {
      font-size: 25px;
      flex: 2;
    }
    &__bigger-font {
      font-size: 33px;
      flex: 2;
      margin-right: 1.7em;
    }
  }
  @include width-from($large_device) {
    //@include font-size(22px);
  }
  @include width-from($extra_large_device) {
    //@include font-size(24px);
  }
}

.product__description {
  display: none;
  @include width-from($medium_device) {
    display: block;
    @include font-size(18px);
    line-height: 1.35;
    &--narrow {
    @include width-from($large_device) {
        margin-right: 4em;
        margin-left: 4em;
      }
    }
  }
}

.product__image {
  display: none;
  border-radius: 3px;
  @include width-from($medium_device) {
    display: block;
    float: right;
    width: $product__image--width;
    height: $product__image--height;
    padding-left: 20px;
  }
}

.product__image-img {
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.product-links {
  flex: 0;
  display: flex;
  flex-direction: row;
  width: 15rem;
  align-self: center;
  &__item {
    flex: 1;
    display: block;
    width: 43%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    &:first-child {
      //margin-bottom: 0.5rem;
      //margin-right: 0.25rem;
    }
  }
}<commit_msg>AB | Fix browser compatibility issues<commit_after>$product__image--width: 270px;
$product__image--height: 180px;
$product--padding: 1rem;

.product-intro {
  text-align: center;
  color: $dark_grey;
}


.product {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: .8em;
  padding: $product--padding;
  padding-top: 0;
  text-align: center;
  color: $white;
  // border-radius: 3px;
  &--citizens-notifications {
    $color: $notify--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/notifications.jpg") no-repeat;
    background-size: cover;
  }
  &--block-chain {
    $color: $reward--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/blockchain.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/collab-policy.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy-bar {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/barcelona.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy-mad {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/madrid.jpg") no-repeat;
    background-size: cover;
  }
  &--collaborative-policy-rey {
    $color: $propose--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/reykjavik.jpg") no-repeat;
    background-size: cover;
  }
  &--electronic-voting {
    $color: $vote--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/evote.jpg") no-repeat 50% 50%;
    background-size: cover;
  }
  &--open-auth {
    $color: $auth--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/open-auth.jpg") no-repeat;
    background-size: cover;
  }
  &--secure-notifications {
    $color: $auth--color;
    background-color: $color;
    background: linear-gradient(rgba($color, 0.8), rgba($color, 0.8)), image-url("tools/secure-notifications.jpg") no-repeat;
    background-size: cover;
  }

  @include width-from($medium_device) {
    margin: 0.4em;
    display: flex;
    flex: 1;
    justify-content: center;
    align-self: stretch;
    &--two-thirds {
      flex: 2;
    }
  }

  &__text {
    @include width-from($medium_device) {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-right: 0.5rem;
      &--align-middle {
        align-self: center;
      }
    }
  }
  &__header {
      width: 100%;
      display: flex;
      flex-direction: row;
      }
  &__icon {
    @include width-from($large_device) {
      flex: 1;
      height: 45px;
      width: 35%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  &__icon--align-right {
    background-position: right;
    margin-right: 1em;
    height: 55px;
  }
}

.product__name {
  flex: 2;
  line-height: 1.1;
  font-family: $heading_title_font_family;
  letter-spacing: -0.02rem;
  @include font-size(24px);
  @include width-from($large_device) {
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    @include font-size(20px);
    &__medium-font {
      font-size: 25px;
      flex: 2;
    }
    &__bigger-font {
      font-size: 33px;
      flex: 2;
      margin-right: 1.7em;
    }
  }
  @include width-from($large_device) {
    //@include font-size(22px);
  }
  @include width-from($extra_large_device) {
    //@include font-size(24px);
  }
}

.product__description {
  display: none;
  @include width-from($medium_device) {
    display: block;
    @include font-size(18px);
    line-height: 1.35;
    &--narrow {
    @include width-from($large_device) {
        margin-right: 4em;
        margin-left: 4em;
      }
    }
  }
}

.product__image {
  display: none;
  border-radius: 3px;
  @include width-from($medium_device) {
    display: block;
    float: right;
    width: $product__image--width;
    height: $product__image--height;
    padding-left: 20px;
  }
}

.product__image-img {
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.product-links {
  display: flex;
  flex-direction: row;
  width: 12rem;
  align-self: center;
  &__item {
    flex: 1;
    display: block;
    width: 43%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    &:first-child {
      //margin-bottom: 0.5rem;
      //margin-right: 0.25rem;
    }
  }
}
{'fraction_non_alphanumeric': 0.1654661661763214, 'fraction_numerical': 0.024551080450441312, 'mean_word_length': 2.792997306656406, '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': '3389582', 'n_tokens_mistral': 3776, 'n_tokens_neox': 3531, 'n_words': 665}