body {
font-family: 'Merriweather Sans', sans-serif;
background-image: linear-gradient(green, yellow, blue, orange);  
}

header {
padding: 2vw;
background-color: white;
text-align: center;
margin: 0, 2vw;
font-family: 'Merriweather Sans', sans-serif;
font-size: 1.5em;  
}

.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;  
}

.card {
display: flex;
flex-direction: column;
overflow: hidden;
background: white;  
margin: 15px;
padding: 1vw;
max-width: 200vw;  
}

@media (min-width: 400px){
	.card {
    max-width: 100vw;
	}
}

@media (min-width: 700px){
  .card {
    max-width: 40vw;
  }
}

.image {
width: 100%;
height: 100%;  
}

.content {
padding: 1em;
display: flex;  
align-items: center;
flex-direction: column;  
}

.title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.2em;
color: #000;  
}

p {
padding: 2vw;
background-color: white;
text-align: center;
margin: 0, 2vw;
font-family: 'Merriweather Sans', sans-serif;  
color: #545454;  
}