<commit_before>/* topdoc
  name: Related Posts
  family: cfgov-molecules
  patterns:
    - name: Default example
      markup: |
    <div class="m-related-posts">
        <h2 class="header-slug">
            <span class="header-slug_inner">
                Related Posts
            </span>
        </h2>
        <section class="m-related-posts_section">
            <h4>
                <span class="cf-icon"></span>
            </h4>
            <ul class="m-related-posts_list">
                <li class="list_item">
                    <h4 class="u-mb5">
                        <a class="list_link" >
                        </a>
                    </h4>
                    <p class="date">
                        <span class="datetime">
                            <time class="datetime_date" datetime="">
                            </time>
                        </span>
                    </p>
                </li>
            </ul>
        </section>
    </div>
    codenotes:
      - |
        Structural cheat sheet:
        -----------------------
        .m-related-posts
          .header-slug
            .header-slug_inner
          .m-related-posts_section
            .h4
              .cf-icon
            .m-related-posts_list
              .list-item
                h4
                  .list-link
                .date
                  .datetime
                    .time.datetime_date
  tags:
    - cfgov-molecules
*/

@margin_half__em: unit(15px / @base-font-size-px, em);

@list_half-width: {
    .grid_nested-col-group();

    .list_item {
        .grid_column(6);
    }

    // Using .list__spaced items within a grid column causes unwanted
    // extra margins because grid columns suppress margin collapsing.
    // To counteract that we need to use a negative margin on the list.
    // This means we also need to add a top margin to the first list
    // item since the default .list__spaced only applies margins to
    // .list_item + .list_item.
    &.list__spaced {
        margin-top: @margin_half__em * -1;

        .list_item {
            margin-top: @margin_half__em;
        }
    }
};

.m-related-posts__half-width {
    .m-related-posts_list {
        @list_half-width();
    }
}

.m-related-posts_list {
    .list_link {
        .u-link__colors(@pacific, @pacific, @pacific-50, @pacific, @navy);
        .u-link__no-border();

        &:hover {
            border-bottom: 1px dotted;
        }
    }

    .respond-to-range(@tablet-min, @tablet-max, {
        @list_half-width();
    });
}


/* topdoc
    name: EOF
    eof: true
*/
<commit_msg>Fix for half width on mobile<commit_after>/* topdoc
  name: Related Posts
  family: cfgov-molecules
  patterns:
    - name: Default example
      markup: |
    <div class="m-related-posts">
        <h2 class="header-slug">
            <span class="header-slug_inner">
                Related Posts
            </span>
        </h2>
        <section class="m-related-posts_section">
            <h4>
                <span class="cf-icon"></span>
            </h4>
            <ul class="m-related-posts_list">
                <li class="list_item">
                    <h4 class="u-mb5">
                        <a class="list_link" >
                        </a>
                    </h4>
                    <p class="date">
                        <span class="datetime">
                            <time class="datetime_date" datetime="">
                            </time>
                        </span>
                    </p>
                </li>
            </ul>
        </section>
    </div>
    codenotes:
      - |
        Structural cheat sheet:
        -----------------------
        .m-related-posts
          .header-slug
            .header-slug_inner
          .m-related-posts_section
            .h4
              .cf-icon
            .m-related-posts_list
              .list-item
                h4
                  .list-link
                .date
                  .datetime
                    .time.datetime_date
  tags:
    - cfgov-molecules
*/

@margin_half__em: unit(15px / @base-font-size-px, em);

@list_half-width: {
    .grid_nested-col-group();

    .list_item {
        .grid_column(6);
    }

    // Using .list__spaced items within a grid column causes unwanted
    // extra margins because grid columns suppress margin collapsing.
    // To counteract that we need to use a negative margin on the list.
    // This means we also need to add a top margin to the first list
    // item since the default .list__spaced only applies margins to
    // .list_item + .list_item.
    &.list__spaced {
        margin-top: @margin_half__em * -1;

        .list_item {
            margin-top: @margin_half__em;
        }
    }
};

.m-related-posts__half-width {
    .m-related-posts_list {
        .respond-to-min(@tablet-min {
            @list_half-width();
        });
    }
}

.m-related-posts_list {
    .list_link {
        .u-link__colors(@pacific, @pacific, @pacific-50, @pacific, @navy);
        .u-link__no-border();

        &:hover {
            border-bottom: 1px dotted;
        }
    }

    .respond-to-range(@tablet-min, @tablet-max, {
        @list_half-width();
    });
}


/* topdoc
    name: EOF
    eof: true
*/

{'fraction_non_alphanumeric': 0.1261637849135474, 'fraction_numerical': 0.0060801824054721645, 'mean_word_length': 1.2220346137610807, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, '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': '3220865', 'n_tokens_mistral': 1621, 'n_tokens_neox': 1542, 'n_words': 334}