<ul class="badge-bullets">
  <li class="bullet">
    <div class="bullet-icon" data-for-badge="1"></div>
    <div class="bullet-content">
      <p>Lorem dolor sit amet consectetur adipisicing elit Doloremque, minus, blanditiis.</p>
    </div>
  </li>  
  
  <li class="bullet">
    <div class="bullet-icon" data-for-badge="2"></div>
    <div class="bullet-content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </li>
  
  <li class="bullet">
    <div class="bullet-icon" data-for-badge="3"></div>
    <div class="bullet-content">
      <p>Lorem ipsum sit amet consectetur adipisicing elit Doloremque, minus, blanditiis.</p>
    </div>
  </li> 
</ul>

@import "bourbon";
@import "neat";

$xx-small-width: rem(320);
$x-small-width:  rem(480);
$small-width:    rem(640);
$medium-width:   rem(800);
$large-width:    rem(960);
$x-large-width:  rem(1200);
$xx-large-width: rem(1400);

$xxx-small: new-breakpoint(max-width $xx-small-width 1);   //  Up to 320
$xx-small: new-breakpoint(min-width $xx-small-width 1);    //  320 and up
$x-small: new-breakpoint(min-width $x-small-width 4);      //  480 and up
$small: new-breakpoint(min-width $small-width 12);         //  640 and up
$medium: new-breakpoint(min-width $medium-width 12);       //  800 - 959
$large: new-breakpoint(min-width $large-width 12);         //  960 - 1199 
$x-large: new-breakpoint(min-width $x-large-width 12);     // 1200 - 1399
$xx-large: new-breakpoint(min-width $xx-large-width 12);   // 1400 and up

.badge-bullets {
  $base-line-height: 1.5em !default;
  $action-color: #d97d2e !default;
  $dark-gray: #333 !default;
  $base-font-color: $dark-gray !default;
  $icon-bullet-size: 3.125em;

  margin: 1em;
  margin-bottom: $base-line-height;
  overflow: auto;
  padding: 0;

  display: flex;
  align-content: center;
  flex-wrap: wrap;
  @include media($large-width) {
    flex-wrap: nowrap;
  }

  .bullet {
    flex-basis: 20em;
    flex-grow: 1;
    margin-bottom: 2em;
  }
  .bullet-icon {
    background: $action-color;
    border-radius: 50%;
    float: left;
    @include media($large-width) {
      float: none; 
    }
    line-height: $icon-bullet-size;
    height: $icon-bullet-size;
    width: $icon-bullet-size;
    text-align: center;
    @include media($large-width) {
      margin: 0 auto;
    }
  }
  .bullet-icon:before {
    content: attr(data-for-badge);
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
  }
  .bullet-content {
    font-size: 1.125em;
    margin-left: $icon-bullet-size * 1.4;
    @include media($large-width) {
      margin-left: 0;
      text-align: center;
    }
  }
  p {
    margin: 0;
    color: $base-font-color;
    line-height: $base-line-height;
  }
  li {
    list-style: none;
  }
}