.planContainer
  .plan
    .titleContainer
      .title Hobby
    .infoContainer
      .price
        p $6 
        span /mo
      .p.desc #[em Great for beginners and hobbyists.]
      ul.features
        li #[strong 2] Users
        li #[strong 5] Projects
        li #[strong 10GB] Storage
        li #[strong 100GB] Bandwidth
      a.selectPlan Select Plan
  .plan
    .titleContainer
      .title Developer
    .infoContainer
      .price
        p $12 
        span /mo
      .p.desc #[em Recommended for developers and experienced hobbyists.]
      ul.features
        li #[strong 5] Users
        li #[strong 15] Projects
        li #[strong 50GB] Storage
        li #[strong 500GB] Bandwidth
        li #[strong 1] Free Domain
      a.selectPlan Select Plan
  .plan
    .titleContainer
      .title BUSINESS
    .infoContainer
      .price
        p $20
        span /mo
      .p.desc #[em Ideal for small businesses and experienced developers.]
      ul.features
        li #[strong 20] Users
        li #[strong Unlimited] Projects
        li #[strong 150GB] Storage
        li #[strong 1TB] Bandwidth
        li #[strong 2] Free Domains
      a.selectPlan Select Plan

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');

$accent-color: #1abc9c;
$text-color: #2d3b48;
$plan-padding: 1em;
$plan-margin: 1em;
$title-background: #f3f3f3;
$title-size: 1.45em;
$price-size: 1.35em;
$feature-size: 1em;

body { 
  background-color: $accent-color;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  margin: 0;
  display: flex;   
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.planContainer {
  display: flex;
  flex-wrap: wrap;
  margin: $plan-margin;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}

.plan {
  background: white;
  width: 20em;
  box-sizing: border-box;
  text-align: center;
  margin: $plan-margin;
  margin-bottom: $plan-margin;
  .titleContainer {
    background-color: $title-background;
    padding: $plan-padding;
    .title {
      font-size: $title-size;
      text-transform: uppercase;
      color: $accent-color;
      font-weight: 700;
    }
  }
  .infoContainer {
    padding: $plan-padding;
    color: $text-color;
    box-sizing: border-box;
    .price {
      font-size: $price-size;
      padding: $plan-padding 0;
      font-weight: 600;
      margin-top: 0;
      display: inline-block;
      width: 80%;
      p {
        font-size: $price-size;
        display: inline-block;
        margin: 0;
      }
      span {
        font-size: $price-size*0.75;
        display: inline-block;
      }
    }
    .desc {
      padding-bottom: $plan-padding;
      border-bottom: 2px solid $title-background;
      margin: 0 auto;
      width: 90%;
      em {
        font-size: $feature-size;
        font-weight: 500;
      }
    }
    .features {
      font-size: $feature-size;
      list-style: none;
      padding-left: 0;
      li { 
        padding: $plan-padding/2;
      }
    }
    .selectPlan {
      border: 2px solid $accent-color;
      padding: $plan-padding*0.75 $plan-padding;
      border-radius: $plan-padding*2.5;
      cursor: pointer;
      transition: all 0.25s;
      margin: $plan-margin auto;
      box-sizing: border-box;
      max-width: 70%;
      display: block;
      font-weight: 700;
      &:hover {
        background-color: $accent-color;
        color: white;
      }
    }
  }
}

@media screen and (max-width: 25em) {
  .planContainer {
    margin: 0;
    .plan {
      width: 100%;
      margin: $plan-margin 0;
    }
  }
}