/* || General page styles */

.card header,
.card footer {
  height: 5rem;
  background-color: #7FB77E;
}

h2,
p {
  margin: 0;
}

h2 {
  padding: .4em;
  font-size:x-large;
}

article {
  height: 12em;
}

/* || General styles - put these straight into your style sheet */

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

.card {
  position: relative;
  width: 35em;
  min-height: 22em;
  margin: 5em auto;
  background-color: #B1D7B4;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

.card header {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  border-radius: 1.5em 1.5em 0 0;
}

.card footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  border-radius: 0 0 1.5em 1.5em;
  font-size: larger;
}

footer p {  
  padding: 1.5em;
}

.card article img {
  max-height: 100%;
  height: 256px;
  float: right;
}