h1 {
font-family: 'Slabo 27px', serif;
text-align: center;
font-size: 40px;
color: rgb(55, 74, 156);
}
    
h2 {
font-family: 'Slabo 27px', serif;
text-align: center;
font-size: 25px;
color: rgb(55, 74, 156);
}
    
p {
font-family: 'source sans pro', sans-serif;
font-size: 18px;
}
    
.cards section {
background-color: rgba(178, 175, 231, 0.7);
border: solid 1px rgb(55, 74, 156);
        
}
    
div.cards {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
padding: 20px;
max-width: 1100px;
margin: 0 auto;
box-shadow: 0 0 30px;
text-align: center;
}
    
.cards section img {
max-width: 200px;
box-shadow: 0px 0px 20px;
}
    
footer {
text-align: center;
padding: 15px;
font-family: 'Slabo 27px', serif;
color: rgb(55, 74, 156);
font-size: 18px;
}
    
@media only screen and (min-width: 40rem) {
div.cards {
grid-template-columns: 1fr 1fr;
}
}
    
@media only screen and (min-width: 70rem) {
div.cards {
grid-template-columns: repeat(4, 1fr);
}
}