@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@491&display=swap');

header,
main,
footer{
    margin: 0 auto;
}
header{
    text-align: center;
    color: rgb(24, 107, 216);
    font-family: 'playfair Display', sans-serif, serif;
    font-size: 1.5rem;
}

main{
    background-color: rgb(218, 211, 211);
    margin: 25px;
}

section h2{
    color: rgb(24, 107, 216);
    margin: 1.5rem;  
    

}

section p{
    font-family: 'playfair Display', sans-serif, serif;
    font-size: 20px;
    font-weight: bolder;
    max-width: 300px;
    margin: 0 auto;
}

.cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    box-shadow: 0 0 20px black;
    padding: 10px;
    margin: 15px;

}

img{
    max-width: 80%;
    margin: 2rem;
    box-shadow: 0 0 40px black;
    

}

section{
    text-align: center;
    background-color: rgb(203, 194, 211);
    border: 1px solid;
    margin: 2px;
}

footer{
    border-top: 1px solid #555 ;
    text-align: center;
}

/*medium size*/
@media only screen and (min-width: 30rem){
   .cards{
       grid-template-columns: repeat(2,1fr);
   } 
}

/*large*/
@media only screen and (min-width: 60rem){
    .cards{
        grid-template-columns: repeat(4, 1fr);
    }
}