Star ratings

<p>1.8 star rating</p>
<div class="c-rating c-rating--small">
   <span class="c-rating--fill c-ratings--fill-18"></span>
</div>
<p>3 star rating</p>
<div class="c-rating c-rating--small">
   <span class="c-rating--fill c-ratings--fill-30"></span>
</div>
<p>4.5 star rating</p>
<div class="c-rating c-rating--small">
   <span class="c-rating--fill c-ratings--fill-45"></span>
</div>

<p>1.8 star rating</p>
<div class="c-rating ">
   <span class="c-rating--fill c-ratings--fill-18"></span>
</div>
<p>3 star rating</p>
<div class="c-rating ">
   <span class="c-rating--fill c-ratings--fill-30"></span>
</div>
<p>4.5 star rating</p>
<div class="c-rating ">
   <span class="c-rating--fill c-ratings--fill-45"></span>
</div>

<p>1.8 star rating</p>
<div class="c-rating c-rating--medium">
   <span class="c-rating--fill c-ratings--fill-18"></span>
</div>
<p>3 star rating</p>
<div class="c-rating c-rating--medium">
   <span class="c-rating--fill c-ratings--fill-30"></span>
</div>
<p>4.5 star rating</p>
<div class="c-rating c-rating--medium">
   <span class="c-rating--fill c-ratings--fill-45"></span>
</div>

<p>1.8 star rating</p>
<div class="c-rating c-rating--large">
   <span class="c-rating--fill c-ratings--fill-18"></span>
</div>
<p>3 star rating</p>
<div class="c-rating c-rating--large">
   <span class="c-rating--fill c-ratings--fill-30"></span>
</div>
<p>4.5 star rating</p>
<div class="c-rating c-rating--large">
   <span class="c-rating--fill c-ratings--fill-45"></span>
</div>

<div class="c-ratingSelectable">
  <input id="rating6small" class="c-ratingSelectable-input" type="radio" value="6" name="small">
  <label for="rating6small" title="6 stars out of 6" class="c-icon--star ">6/6</label>
  <input id="rating5small" class="c-ratingSelectable-input" type="radio" value="5" name="small">
  <label for="rating5small" title="5 stars out of 6" class="c-icon--star ">5/6</label>
  <input id="rating4small" class="c-ratingSelectable-input" type="radio" value="4" name="small">
  <label for="rating4small" title="4 stars out of 6" class="c-icon--star ">4/6</label>
  <input id="rating3small" class="c-ratingSelectable-input" type="radio" value="3" name="small">
  <label for="rating3small" title="3 stars out of 6" class="c-icon--star ">3/6</label>
  <input id="rating2small" class="c-ratingSelectable-input" type="radio" value="2" name="small">
  <label for="rating2small" title="2 stars out of 6" class="c-icon--star ">2/6</label>
  <input id="rating1small" class="c-ratingSelectable-input" type="radio" value="1" name="small">
  <label for="rating1small" title="1 stars out of 6" class="c-icon--star ">1/6</label>
</div>

<div class="c-ratingSelectable">
  <input id="rating6medium" class="c-ratingSelectable-input" type="radio" value="6" name="medium">
  <label for="rating6medium" title="6 stars out of 6" class="c-icon--star c-icon--star--medium">6/6</label>
  <input id="rating5medium" class="c-ratingSelectable-input" type="radio" value="5" name="medium">
  <label for="rating5medium" title="5 stars out of 6" class="c-icon--star c-icon--star--medium">5/6</label>
  <input id="rating4medium" class="c-ratingSelectable-input" type="radio" value="4" name="medium">
  <label for="rating4medium" title="4 stars out of 6" class="c-icon--star c-icon--star--medium">4/6</label>
  <input id="rating3medium" class="c-ratingSelectable-input" type="radio" value="3" name="medium">
  <label for="rating3medium" title="3 stars out of 6" class="c-icon--star c-icon--star--medium">3/6</label>
  <input id="rating2medium" class="c-ratingSelectable-input" type="radio" value="2" name="medium">
  <label for="rating2medium" title="2 stars out of 6" class="c-icon--star c-icon--star--medium">2/6</label>
  <input id="rating1medium" class="c-ratingSelectable-input" type="radio" value="1" name="medium">
  <label for="rating1medium" title="1 stars out of 6" class="c-icon--star c-icon--star--medium">1/6</label>
</div>

<div class="c-ratingSelectable">
  <input id="rating6large" class="c-ratingSelectable-input" type="radio" value="6" name="large">
  <label for="rating6large" title="6 stars out of 6" class="c-icon--star c-icon--star--large">6/6</label>
  <input id="rating5large" class="c-ratingSelectable-input" type="radio" value="5" name="large">
  <label for="rating5large" title="5 stars out of 6" class="c-icon--star c-icon--star--large">5/6</label>
  <input id="rating4large" class="c-ratingSelectable-input" type="radio" value="4" name="large">
  <label for="rating4large" title="4 stars out of 6" class="c-icon--star c-icon--star--large">4/6</label>
  <input id="rating3large" class="c-ratingSelectable-input" type="radio" value="3" name="large">
  <label for="rating3large" title="3 stars out of 6" class="c-icon--star c-icon--star--large">3/6</label>
  <input id="rating2large" class="c-ratingSelectable-input" type="radio" value="2" name="large">
  <label for="rating2large" title="2 stars out of 6" class="c-icon--star c-icon--star--large">2/6</label>
  <input id="rating1large" class="c-ratingSelectable-input" type="radio" value="1" name="large">
  <label for="rating1large" title="1 stars out of 6" class="c-icon--star c-icon--star--large">1/6</label>
</div>