<div id="wrapper">
  <div id="pricing-tables">
    <div class="pricing-table">
      <div class="header">
        <div class="title">Basic</div>
        <div class="price">$29<span>/mo</span></div>
      </div>
      <div class="features">
        <ul>
          <li>2GB <span>Disk space</span></li>
          <li>20GB <span>Traffic/mo</span></li>
          <li>512MB <span>Memory</span></li>
          <li>5 Domains <span>+1 Free</span></li>
        </ul>
      </div>
      <div class="signup">
        <a href="#">Choose plan</a>
      </div>
    </div>
    
    <div class="pricing-table featured">
      <div class="header">
        <div class="title">Standard</div>
        <div class="price">$59<span>/mo</span></div>
      </div>
      <div class="features">
        <ul>
          <li>4GB <span>Disk space</span></li>
          <li>50GB <span>Traffic/mo</span></li>
          <li>2GB <span>Memory</span></li>
          <li>10 Domains <span>+2 Free</span></li>
        </ul>
      </div>
      <div class="signup">
        <a href="#">Choose plan</a>
      </div>
    </div>
    
    <div class="pricing-table">
      <div class="header">
        <div class="title">Professional</div>
        <div class="price">$99<span>/mo</span></div>
      </div>
      <div class="features">
        <ul>
          <li>10GB <span>Disk space</span></li>
          <li>100GB <span>Traffic/mo</span></li>
          <li>4GB <span>Memory</span></li>
          <li>Unlimited Domains</li>
        </ul>
      </div>
      <div class="signup">
        <a href="#">Choose plan</a>
      </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Abel');

body {
  background: #F0EDED;
}

#wrapper {
  width: 100%;
    
  @media screen and (min-width: 1024px) {
    width: 1100px;
    margin: 0 auto;
  }
  
  #pricing-tables {
    font-family: "Abel", sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    @media screen and (min-width: 1024px) {
      flex-direction: row;
    }
    
    .pricing-table {
      max-width: 300px;
      width: 100%;
      margin: 15px 0;
      
      @media screen and (min-width: 1024px) {
        margin: 0;
      }
      
      .header {
        
        .title {
          text-align: center;
          text-transform: uppercase;
          padding: 15px 0;
          background: #e4e4e4;
          color: #000;
          font-size: 16x;
        }
        
        .price {
          text-align: center;
          text-transform: uppercase;
          padding: 15px 0;
          background: #f6f6f6;
          color: #000;
          font-size: 28px;
          font-weight: 300;
            
            span {
              font-size: 14px;
              vertical-align: super;
            }
        }
      }
      
      .features {
        background: #fff;
      
        ul {
          list-style: none;
          margin: 0;
          padding: 15px 0;

          li {
            padding: 8px 5px;
            text-align: center;
            
            span {
              color: #999;
            }
          }
        }
      }
      .signup {
        background: #fff;
        padding: 2px 0 25px 0;
        width: 100%;
        display: flex;
        justify-content: center;
        
        a {
          width: auto;
          margin: 0 auto;
          padding: 8px 10px;
          text-align: center;
          text-decoration: none;
          color: #FC4445;
          border: 1px solid #FC4445;
          transition: all .2s ease;
          
          &:hover {
            color: #fff;
            background: #FC4445;
          }
        }
      }
      
      &.featured {
        
        .header {
          
          .title {
            background: #FC4445;
            color: #fff;
          }
        }
        
        .signup {
          
          a {
            background: #FC4445;
            color: #fff;
            
            &:hover {
              color: #FC4445;
              background: #fff;
            }
          }
        }
      }
    }
  }
}