.mod-card-slider
  .header
    h6 Proin aliquam tortor et aliquam
    .help.i-help
  .content
    .section
      .slider.tall
        .value
          span $100
          small
            '  /orci
        .bar
          .range style='width: 50%;'
          .handler style='left: 50%;'
          .average style='left: 50%'
            .average-circle
            .average-tooltip
              span.policygenius-tooltip
                span.average-text Ullamcorper
                .popup Suspendisse molestie vel sapien at posuere. Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor sed vestibulum.
          .value.current style='left: 50%;'
            span $1,000
            small
              '  /orci
        .value
          span $5,436
          small
            '  /orci
    .section.emphasized
      h6
        strong 10
        span  Suspendisse molestie vel sapien at posuere
      a href='#' Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor.
    .section
      h6 Phasellus tellus augue, maximus a viverra
      ul
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Etiam malesuada quis
        li: span.truncate Suspendisse molestie vel
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Etiam malesuada quis
        li: span.truncate Suspendisse molestie vel
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Etiam malesuada quis
        li: span.truncate Suspendisse molestie vel
        li: span.truncate Aenean ac bibendum nisi
  .footer
    a.button.action href='#' Maecenas ullamcorper turpis quis

css:
  .mod-card-slider {
    max-width: 600px;
  }

.mod-card-slider.narrow
  .header
    h6 Proin aliquam tortor et aliquam
    .help.i-help
  .content
    .section
      .details
        .cost
          span $1,000
          small
            '  /orci
        .count
          .value 10
          span  Nullam metus velit
      .slider
        .bar
          .range style='width: 50%;'
          .handler style='left: 50%;'
      .note
        a href='#' Phasellus viverra mollis massa ut eleifend. Nulla maximus congue dolor.
    .section
      h6 Phasellus tellus augue, maximus a viverra
      ul
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Etiam malesuada quis
        li: span.truncate Suspendisse molestie vel
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Etiam malesuada quis
        li: span.truncate Suspendisse molestie vel
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Aenean ac bibendum nisi
        li: span.truncate Etiam malesuada quis
        li: span.truncate Suspendisse molestie vel
        li: span.truncate Aenean ac bibendum nisi
  .footer
    a.button.action href='#' Maecenas ullamcorper turpis quis

.flex-row style='max-width: 800px'
  .mod-card-slider.narrow
    .header
      h6 Proin aliquam tortor et aliquam
      .help.i-help
    .content
      .section
        .details
          .cost
            span $1,000
            small
              '  /orci
          .count
            .value 10
            span  Nullam metus velit
        .slider
          .bar
            .range style='width: 75%;'
            .handler style='left: 75%;'
        .note
          a href='#' Pellentesque habitant morbi tristique
      .section
        h6 Phasellus tellus augue, maximus a viverra
        ul
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Etiam malesuada quis
          li: span.truncate Suspendisse molestie vel
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Etiam malesuada quis
          li: span.truncate Suspendisse molestie vel
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Etiam malesuada quis
          li: span.truncate Suspendisse molestie vel
          li: span.truncate Aenean ac bibendum nisi
    .footer
      a.button.action href='#' Maecenas ullamcorper turpis quis
  .mod-card-slider.narrow
    .header
      h6 Phasellus nec iaculis velit, quis
      .help.i-help
    .content
      .section
        .details
          .cost
            span $1,000
            small
              '  /orci
          .count
            .value 10
            span  Nullam metus velit
        .slider
          .bar
            .range style='width: 75%;'
            .disabled style='width: 20%;'
            .handler style='left: 75%;'
        .note
          a href='#' Suspendisse vel massa iaculis, porta massa
      .section
        h6 Phasellus tellus augue, maximus a viverra
        ul
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Etiam malesuada quis
          li: span.truncate Suspendisse molestie vel
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Etiam malesuada quis
          li: span.truncate Suspendisse molestie vel
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Aenean ac bibendum nisi
          li: span.truncate Etiam malesuada quis
          li: span.truncate Suspendisse molestie vel
          li: span.truncate Aenean ac bibendum nisi
    .footer
      a.button.action href='#' Maecenas ullamcorper turpis quis