/* Some CSS Setup - nothing to do with flexbox */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: sans-serif;
  margin: 0;
  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}

a {
  color:white;
}

.plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan ul li {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding:10px;
}

.plan ul li:last-child {
  border-bottom: 0;
}

.plan a {
  text-decoration: none;
  background:#FEFF00;
  padding:10px;
  color:black;
  border-radius:4px;
}


.plan h2 {
  text-transform: uppercase;
  color:white;
  letter-spacing: 2px;
  text-shadow:3px 3px 0 rgba(0,0,0,0.1);
}

.price {
  font-size: 50px;
  font-family: serif;
  margin: 10px 0;
}

/* Flex container */
.pricing-grid {
  max-width:750px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.plan {
  background: rgba(0,0,0,0.1);
  margin: 20px;
  padding: 20px;
  border-radius: 4px;
  text-align: center;

  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.plan > * {
  flex: 1 1 100%;
}

.plan .cta {
  align-self: flex-end;
}