Pricing

<!-- Vertical pricing plan: Border -->
<div class="card w-100">
  <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
    <h3 class="text-body mb-0">Free</h3>
  </div>
  <div class="card-body px-grid-gutter py-grid-gutter">
    <div class="d-flex align-items-end py-2 px-4 mb-4">
      <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
      <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2">0</span>
      <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
    </div>
    <ul class="list-unstyled py-2 mb-4">
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-x font-size-xl text-muted mr-2"></i>
        <span class="text-muted">No ads</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-x font-size-xl text-muted mr-2"></i>
        <span class="text-muted">Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-x font-size-xl text-muted mr-2"></i>
        <span class="text-muted">Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-x font-size-xl text-muted mr-2"></i>
        <span class="text-muted">7 profiles</span>
      </li>
    </ul>
    <div class="text-center mb-2">
      <a class="btn btn-outline-primary" href="#">Get started</a>
    </div>
  </div>
</div>

<!-- Vertical pricing plan: Shadow -->
<div class="card border-0 box-shadow w-100">
  <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
    <h3 class="text-body mb-0">Family</h3>
  </div>
  <div class="card-body px-grid-gutter py-grid-gutter">
    <div class="d-flex align-items-end py-2 px-4 mb-4">
      <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
      <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2">15</span>
      <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
    </div>
    <ul class="list-unstyled py-2 mb-4">
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>No ads</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>7 profiles</span>
      </li>
    </ul>
    <div class="text-center mb-2">
      <a class="btn btn-outline-primary" href="#">Get started</a>
    </div>
  </div>
</div>

// Vertical pricing plan: Border
.card.w-100
  .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
    h3.text-body.mb-0 Free
  .card-body.px-grid-gutter.py-grid-gutter
    .d-flex.align-items-end.py-2.px-4.mb-4
      span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
      span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2 0
      span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
    ul.list-unstyled.py-2.mb-4
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span 20 millions tracks
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span Shuffle play
      li.d-flex.align-items-center.mb-3
        i.fe-x.font-size-xl.text-muted.mr-2
        span.text-muted No ads
      li.d-flex.align-items-center.mb-3
        i.fe-x.font-size-xl.text-muted.mr-2
        span.text-muted Get unlimited skips
      li.d-flex.align-items-center.mb-3
        i.fe-x.font-size-xl.text-muted.mr-2
        span.text-muted Offline mode
      li.d-flex.align-items-center.mb-3
        i.fe-x.font-size-xl.text-muted.mr-2
        span.text-muted 7 profiles
    .text-center.mb-2
      a.btn.btn-outline-primary(href="#") Get started

// Vertical pricing plan: Shadow
.card.border-0.box-shadow.w-100
  .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
    h3.text-body.mb-0 Family
  .card-body.px-grid-gutter.py-grid-gutter
    .d-flex.align-items-end.py-2.px-4.mb-4
      span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
      span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2 15
      span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
    ul.list-unstyled.py-2.mb-4
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span 20 millions tracks
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span Shuffle play
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span No ads
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span Get unlimited skips
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span Offline mode
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span 7 profiles
    .text-center.mb-2
      a.btn.btn-outline-primary(href="#") Get started

<!-- Horizontal pricing plans -->

<!-- Pricing -->
<div class="d-sm-flex align-items-start justify-content-between border-bottom py-4 py-sm-5">
  <div class="ml-4 ml-sm-0 py-2" style="width: 10rem;">
    <h3 class="mb-2">Free</h3>
    <div class="font-size-xs">Find aute irure dolor in reprehenderit in volatek</div>
  </div>
  <div class="d-flex align-items-end py-3 py-sm-2 px-4">
    <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
    <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2">0</span>
    <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
  </div>
  <ul class="list-unstyled py-2 mb-0">
    <li class="d-flex align-items-center mb-3">
      <i class="fe-check font-size-xl text-primary mr-2"></i>
      <span>Up to 3 projects for each member</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="fe-check font-size-xl text-primary mr-2"></i>
      <span>2 team members allowed</span>
    </li>
  </ul>
</div>

<!-- Pricing -->
<div class="d-sm-flex align-items-start justify-content-between py-4 py-sm-5">
  <div class="ml-4 ml-sm-0 py-2" style="width: 10rem;">
    <h3 class="mb-2">Standard</h3>
    <div class="font-size-xs">Find aute irure dolor in reprehenderit in volatek</div>
  </div>
  <div class="d-flex align-items-end py-3 py-sm-2 px-4">
    <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
    <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2">15</span>
    <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
  </div>
  <ul class="list-unstyled py-2 mb-0">
    <li class="d-flex align-items-center mb-3">
      <i class="fe-check font-size-xl text-primary mr-2"></i>
      <span>Unlimited number of projects</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="fe-check font-size-xl text-primary mr-2"></i>
      <span>Up to 5 team members</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="fe-check font-size-xl text-primary mr-2"></i>
      <span>24/7 support</span>
    </li>
    <li class="d-flex align-items-center mb-3">
      <i class="fe-check font-size-xl text-primary mr-2"></i>
      <span>Up to 30GB storage space</span>
    </li>
  </ul>
</div>

// Horizontal pricing plans

// Pricing
.d-sm-flex.align-items-start.justify-content-between.border-bottom.py-4.py-sm-5
  .ml-4.ml-sm-0.py-2(style="width: 10rem;")
    h3.mb-2 Free
    .font-size-xs Find aute irure dolor in reprehenderit in volatek
  .d-flex.align-items-end.py-3.py-sm-2.px-4
    span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
    span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2 0
    span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
  ul.list-unstyled.py-2.mb-0
    li.d-flex.align-items-center.mb-3
      i.fe-check.font-size-xl.text-primary.mr-2
      span Up to 3 projects for each member
    li.d-flex.align-items-center.mb-3
      i.fe-check.font-size-xl.text-primary.mr-2
      span 2 team members allowed

// Pricing
.d-sm-flex.align-items-start.justify-content-between.py-4.py-sm-5
  .ml-4.ml-sm-0.py-2(style="width: 10rem;")
    h3.mb-2 Standard
    .font-size-xs Find aute irure dolor in reprehenderit in volatek
  .d-flex.align-items-end.py-3.py-sm-2.px-4
    span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
    span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2 15
    span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
  ul.list-unstyled.py-2.mb-0
    li.d-flex.align-items-center.mb-3
      i.fe-check.font-size-xl.text-primary.mr-2
      span Unlimited number of projects
    li.d-flex.align-items-center.mb-3
      i.fe-check.font-size-xl.text-primary.mr-2
      span Up to 5 team members
    li.d-flex.align-items-center.mb-3
      i.fe-check.font-size-xl.text-primary.mr-2
      span 24/7 support
    li.d-flex.align-items-center.mb-3
      i.fe-check.font-size-xl.text-primary.mr-2
      span Up to 30GB storage space

<!-- Featured pricing plan -->
<div class="card card-active w-100">
  <div class="card-img-top bg-gradient text-center py-5 px-grid-gutter">
    <h3 class="text-light mb-0">Premium</h3>
  </div>
  <div class="card-body px-grid-gutter py-grid-gutter">
    <div class="d-flex align-items-end py-2 px-4 mb-4">
      <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
      <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2">10</span>
      <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
    </div>
    <ul class="list-unstyled py-2 mb-4">
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>No ads</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-3">
        <i class="fe-check font-size-xl text-primary mr-2"></i>
        <span>7 profiles</span>
      </li>
    </ul>
    <div class="text-center mb-2">
      <a class="btn btn-primary" href="#">Get started</a>
    </div>
  </div>
</div>

// Featured pricing plan
.card.card-active.w-100
  .card-img-top.bg-gradient.text-center.py-5.px-grid-gutter
    h3.text-light.mb-0 Premium
  .card-body.px-grid-gutter.py-grid-gutter
    .d-flex.align-items-end.py-2.px-4.mb-4
      span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
      span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2 10
      span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
    ul.list-unstyled.py-2.mb-4
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span 20 millions tracks
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span Shuffle play
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span No ads
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span Get unlimited skips
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span Offline mode
      li.d-flex.align-items-center.mb-3
        i.fe-check.font-size-xl.text-primary.mr-2
        span 7 profiles
    .text-center.mb-2
      a.btn.btn-primary(href="#") Get started

<!-- Price switcher -->
<div class="cs-pricing-wrap">

  <!-- Switcher -->
  <div class="cs-price-switch justify-content-end pb-2 mb-4">
    <span class="cs-price-label mr-2">Monthly</span>
    <div class="custom-control custom-switch">
      <input class="custom-control-input" type="checkbox" id="priceSwitch">
      <label class="custom-control-label" for="priceSwitch"></label>
    </div>
    <span class="cs-price-label ml-1">Annual</span>
  </div>
  <div class="row">

    <!-- Plan -->
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">
      <div class="card border-0 box-shadow w-100">
        <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
          <h3 class="text-body mb-0">Free</h3>
        </div>
        <div class="card-body px-grid-gutter py-grid-gutter">
          <div class="d-flex align-items-end py-2 px-4 mb-4">
            <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
            <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2" data-current-price="0" data-new-price="0">0</span>
            <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
          </div>
          <ul class="list-unstyled py-2 mb-4">
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>20 millions tracks</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>Shuffle play</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-x font-size-xl text-muted mr-2"></i>
              <span class="text-muted">No ads</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-x font-size-xl text-muted mr-2"></i>
              <span class="text-muted">Get unlimited skips</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-x font-size-xl text-muted mr-2"></i>
              <span class="text-muted">Offline mode</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-x font-size-xl text-muted mr-2"></i>
              <span class="text-muted">7 profiles</span>
            </li>
          </ul>
          <div class="text-center mb-2">
            <a class="btn btn-outline-primary" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Featured plan -->
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">
      <div class="card card-active w-100">
        <div class="card-img-top bg-gradient text-center py-5 px-grid-gutter">
          <h3 class="text-light mb-0">Premium</h3>
        </div>
        <div class="card-body px-grid-gutter py-grid-gutter">
          <div class="d-flex align-items-end py-2 px-4 mb-4">
            <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
            <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2" data-current-price="10" data-new-price="8">10</span>
            <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
          </div>
          <ul class="list-unstyled py-2 mb-4">
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>20 millions tracks</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>Shuffle play</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>No ads</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>Get unlimited skips</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>Offline mode</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>7 profiles</span>
            </li>
          </ul>
          <div class="text-center mb-2">
            <a class="btn btn-primary" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Plan -->
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">
      <div class="card border-0 box-shadow w-100">
        <div class="card-img-top bg-secondary text-center py-5 px-grid-gutter">
          <h3 class="text-body mb-0">Family</h3>
        </div>
        <div class="card-body px-grid-gutter py-grid-gutter">
          <div class="d-flex align-items-end py-2 px-4 mb-4">
            <span class="h2 font-weight-normal text-muted mb-1 mr-2">$</span>
            <span class="cs-price display-2 font-weight-normal text-primary px-1 mr-2" data-current-price="15" data-new-price="12">15</span>
            <span class="h3 font-size-lg font-weight-medium text-muted mb-2">per<br>month</span>
          </div>
          <ul class="list-unstyled py-2 mb-4">
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>20 millions tracks</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>Shuffle play</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>No ads</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>Get unlimited skips</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>Offline mode</span>
            </li>
            <li class="d-flex align-items-center mb-3">
              <i class="fe-check font-size-xl text-primary mr-2"></i>
              <span>7 profiles</span>
            </li>
          </ul>
          <div class="text-center mb-2">
            <a class="btn btn-outline-primary" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// Price switcher
.cs-pricing-wrap

  // Switcher
  .cs-price-switch.justify-content-end.pb-2.mb-4
    span.cs-price-label.mr-2 Monthly
    .custom-control.custom-switch
      input(type="checkbox", id="priceSwitch").custom-control-input
      label(for="priceSwitch").custom-control-label
    span.cs-price-label.ml-1 Annual
  .row

    // Plan
    .col-lg-4.col-sm-6.mb-grid-gutter
      .card.border-0.box-shadow.w-100
        .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
          h3.text-body.mb-0 Free
        .card-body.px-grid-gutter.py-grid-gutter
          .d-flex.align-items-end.py-2.px-4.mb-4
            span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
            span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2(data-current-price="0", data-new-price="0") 0
            span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
          ul.list-unstyled.py-2.mb-4
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span 20 millions tracks
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span Shuffle play
            li.d-flex.align-items-center.mb-3
              i.fe-x.font-size-xl.text-muted.mr-2
              span.text-muted No ads
            li.d-flex.align-items-center.mb-3
              i.fe-x.font-size-xl.text-muted.mr-2
              span.text-muted Get unlimited skips
            li.d-flex.align-items-center.mb-3
              i.fe-x.font-size-xl.text-muted.mr-2
              span.text-muted Offline mode
            li.d-flex.align-items-center.mb-3
              i.fe-x.font-size-xl.text-muted.mr-2
              span.text-muted 7 profiles
          .text-center.mb-2
            a(href="#").btn.btn-outline-primary Get started
    
    // Featured plan
    .col-lg-4.col-sm-6.mb-grid-gutter
      .card.card-active.w-100
        .card-img-top.bg-gradient.text-center.py-5.px-grid-gutter
          h3.text-light.mb-0 Premium
        .card-body.px-grid-gutter.py-grid-gutter
          .d-flex.align-items-end.py-2.px-4.mb-4
            span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
            span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2(data-current-price="10", data-new-price="8") 10
            span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
          ul.list-unstyled.py-2.mb-4
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span 20 millions tracks
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span Shuffle play
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span No ads
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span Get unlimited skips
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span Offline mode
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span 7 profiles
          .text-center.mb-2
            a(href="#").btn.btn-primary Get started

    // Plan
    .col-lg-4.col-sm-6.mb-grid-gutter
      .card.border-0.box-shadow.w-100
        .card-img-top.bg-secondary.text-center.py-5.px-grid-gutter
          h3.text-body.mb-0 Family
        .card-body.px-grid-gutter.py-grid-gutter
          .d-flex.align-items-end.py-2.px-4.mb-4
            span.h2.font-weight-normal.text-muted.mb-1.mr-2 $
            span.cs-price.display-2.font-weight-normal.text-primary.px-1.mr-2(data-current-price="15", data-new-price="12") 15
            span.h3.font-size-lg.font-weight-medium.text-muted.mb-2 per<br>month
          ul.list-unstyled.py-2.mb-4
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span 20 millions tracks
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span Shuffle play
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span No ads
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span Get unlimited skips
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span Offline mode
            li.d-flex.align-items-center.mb-3
              i.fe-check.font-size-xl.text-primary.mr-2
              span 7 profiles
          .text-center.mb-2
            a(href="#").btn.btn-outline-primary Get started