body{
font-family: Arial, sans-serif;
margin:0;
background:#f4f4f4;
}

.navbar{
background:#E8DEF8;
}

.navbar ul{
display:flex;
justify-content:center;
list-style:none;
margin:0;
padding:10px;
}

.navbar a{
color:rgb(19, 18, 18);
text-decoration:none;
margin:0 30px;
height: 20%;
}

.contenedor{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding:20px;
}

.card{
background:#f5e6e6;
padding:20px;
text-align:center;
border-radius:8px;
}

.card img{
max-width:100%;
max-height: 80%;
}

.footer{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding:20px;
background:#7a7878;
color:rgb(17, 16, 16);
}

.footer .card .p .img {
    padding: 10px;
}

/* query para un tamaño medio de la pantalla */

@media (max-width:900px){

.contenedor{
grid-template-columns:repeat(2,1fr);
}

.footer{
grid-template-columns:repeat(2,1fr);
}

}

/* query para un tamaño pequeño de la pantalla */

@media (max-width:600px){

.contenedor{
grid-template-columns:1fr;
}

.footer{
grid-template-columns:1fr;
}

.navbar ul{
flex-direction:column;
align-items:center;
}

}