<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,300,100' rel='stylesheet' type='text/css'>

h1 Material Design Cards
.google-cards
  .google-card
    .google-card-cover
      img(src='https://download.unsplash.com/photo-1426200830301-372615e4ac54')
    .google-card-content
      h3 A Sample Card
      p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis soluta sed ab? Magnam, consectetur temporibus nulla perferendis optio minus, facilis sed earum voluptas tempore perspiciatis exercitationem esse, autem praesentium vitae?
  .google-card
    .google-card-cover
      img(src='https://unsplash.imgix.net/photo-1421930451953-73c5c9ae9abf?fit=crop&fm=jpg&q=75&w=1050')
    .google-card-content
      h3 A Sample Card
      p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis soluta sed ab? Magnam, consectetur temporibus nulla perferendis optio minus, facilis sed earum voluptas tempore perspiciatis exercitationem esse, autem praesentium vitae?
      a.button(href='#') Accept

@import "compass/css3";

body {
  background: #f2f2f2;
  font-family: 'Roboto', Arial, Helvetica;
}

h1 {
  font-size: 40px;
  margin-bottom: 50px;
  text-align: center;
  margin-top: 30px;
}

.google-cards {
  width: 320px;
  margin: 30px auto;
  
  .google-card {
    width: 320px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
    background: #fff;
    margin-bottom: 1.5em;
    
    .google-card-cover {
      height: auto;
      
      img {
        width: 100%;
      }
    }
    
    .google-card-content {
      padding: 15px;
      font-size: 14px;
      color: #333;
      
      h3 {
        font-weight: 500;
        color: #666;
        margin-bottom: .45em;
        text-transform: uppercase;
      }
      
      p {
        line-height: 1.5;
      }
      
      .button {
        display: block;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
        background: #009688;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
        margin-top: 25px;
        
        &:hover {
          background: #00796B;
        }
      }
    }
  }
}