<commit_before>& {
  margin-bottom: 15px;

  .css-device {
    position: relative;
  }

  .css-device__image {
    // Huge
    @media all
    and (min-width: 1200px)
     {
       height: 15vw;
       width: 30vw;
    }
    // Desktop
    @media all
    and (min-width: 992px)
    and (max-width: 1199px)
     {
       height: 15vw;
       width: 30vw;
    }
    // Tablet
    @media all
    and (min-width: 768px)
    and (max-width: 991px) {
      height: 20vw;
      width: 40vw;
    }

    // Mobile
    @media all
    and (min-width: 0px)
    and (max-width: 767px) {
      height: 50vw;
      width: 85vw;
    }
  }

  .css-device--browser {
    width: 100%;
    /* max-width: 100%; set max width here if you need to. */
    border-top: solid 36px #dfdfdf;
    border-right: solid 2px #dfdfdf;
    border-left: solid 2px #dfdfdf;
    border-bottom: solid 2px #dfdfdf;
    border-radius: 4px 4px 0 0;

    &:before {
      display: block;
      position: absolute;
      top: -24px;
      left: 12px;
      width: 12px;
      height: 12px;
      background-color: #ff3366;
      border-radius: 12px;
      box-shadow: 0 0 0 0 #ff3366, 16px 0 0 0 #ffcc99, 32px 0 0 0 #33ff66;
      content: "";
    }

    &::after {
      display: block;
      overflow: hidden;
      position: absolute;
      top: -27px;
      right: 12px;
      padding: 0 4px;
      width: 180px;<commit_msg>Fix device mock styles on mobile<commit_after>& {
  margin-bottom: 15px;

  .css-device {
    position: relative;
  }

  .css-device__image {
    height: 100%;
    width: 100%;
  }

  .css-device--browser {
    /* Desktop */
    @media all
    and (min-width: 992px) {
      height: 15vw;
      width: 25vw;
    }

    /* Tablet */
    @media all
    and (min-width: 768px)
    and (max-width: 991px) {
      height: 25vw;
      width: 40vw;
    }

    /* Mobile */
    @media all
    and (min-width: 0px)
    and (max-width: 767px) {
      height: 50vw;
      width: 80vw;
    }

    border-top: solid 36px #dfdfdf;
    border-right: solid 2px #dfdfdf;
    border-left: solid 2px #dfdfdf;
    border-bottom: solid 2px #dfdfdf;
    border-radius: 4px 4px 0 0;

    &:before {
      display: block;
      position: absolute;
      top: -24px;
      left: 12px;
      width: 12px;
      height: 12px;
      background-color: #ff3366;
      border-radius: 12px;
      box-shadow: 0 0 0 0 #ff3366, 16px 0 0 0 #ffcc99, 32px 0 0 0 #33ff66;
      content: "";
    }

    &::after {
      display: block;
      overflow: hidden;
      position: absolute;
      top: -27px;
      right: 12px;
      padding: 0 4px;
      width: 180px;
{'fraction_non_alphanumeric': 0.12615030674846625, 'fraction_numerical': 0.07285276073619631, 'mean_word_length': 1.784418356456777, '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': '7233733', 'n_tokens_mistral': 1152, 'n_tokens_neox': 969, 'n_words': 263}