style.css

html{
  box-sizing:border-box;
  font-family:'karla';
  font-size:16px;
}
h2,h4,p{
  margin:0;
}
*,*:before,*:after{
  box-sizing:inherit;
}
body{
  padding:20px;
}
#card{
 
box-shadow: 3px 0px 13px 3px rgba(0,0,0,0.39);
  border-radius:5px;
  overflow:hidden;
}
#top-section{
  width:100%;
  height:45%;
 padding:25px;
}
#bottom-section{
  width:100%;
  height:55%;
  color:white;
}
#bottom-left{
  display:inline-block;
  width:100%;
  height:100%;
 
  vertical-align:top;
  background-color:#2ab2af;
  padding:25px;
}
#bottom-right{
  display:inline-block;
   width:100%;
  height:100%;
background-color:#2EBFBD;
  vertical-align:top;
  padding:25px;
}
#top-section h2{
  color:#2ab2af;
  margin-bottom:20px;
}
#top-section h4{
  color:#c0df34;
  margin-bottom:10px;
}
#top-section p{
  color:#98a6bd;
 
}
button{
  color:white;
  background-color:#c0df34;
  border:0;
  padding:10px;
  width:100%;
  margin-top:25px;
  border-radius:5px;
}
button:hover{
  cursor:pointer;
  background-color:#A9C42D;
  transform:scale(1.05);
}
#price{
  font-weight:700;
  font-size:1.4rem;
}
#bottom-left h4{
  margin-bottom:15px;
}
#price,#price-frequency{
  display:inline-block;
}
#price-container{
  margin-bottom:10px;
}
#price-frequency{
  position:relative;
  top:-3px;
  font-size:0.8rem;
  opacity:0.7;
  margin-left:5px;
}
#bottom-left p{
  font-size:0.8rem;
}
ul{
  padding:0;
  list-style:none;
  font-size:0.8rem;
  opacity:0.8;
}


@media (min-width:576px){
  #card{
    width:600px;
    height:400px;
  }
  #bottom-left,#bottom-right{
    width:50%;
  }
}