*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#f8f6d9bd;
font-family:Arial;
display:flex;
flex-direction:column;
align-items:center;
}

/* TÍTULO */
.titulo{
margin:40px 0;
color:rgb(128,107,92);
text-align:center;
}

/* CARD GRANDE */
.containerf{
display:flex;
justify-content:space-between;
align-items:center;
margin:40px 20px;
padding:30px;
background:rgb(173,189,245);
width:90%;
max-width:900px;
border-radius:10px;
box-shadow:10px 10px 0px rgba(91,29,114,0.918);
gap:20px;
flex-wrap:wrap;
}

/* CARDS */
.container{
display:flex;
justify-content:space-between;
align-items:center;
margin:40px 20px;
padding:30px;
background:rgb(251,229,174);
width:90%;
max-width:900px;
border-radius:10px;
box-shadow:10px 10px 0px rgba(53,114,29,0.918);
gap:20px;
flex-wrap:wrap;
}

/* TEXTO */
.conteudo-texto{
flex:1;
min-width:250px;
}

.informacao{
font-size:18px;
margin:5px 0;
}

.projeto{
color:rgb(67,116,220);
font-size:28px;
margin-bottom:10px;
}

.projetof{
color:rgb(11,25,54);
font-size:28px;
margin-bottom:10px;
}

/* IMAGEM */
.foto{
width:250px;
height:250px;
object-fit:cover;
background:white;
padding:10px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.2);
}

/* RESPONSIVO */
@media(max-width:768px){

.container,
.containerf{
flex-direction:column;
text-align:center;
}

.foto{
width:100%;
max-width:300px;
height:auto;
}

.projeto,
.projetof{
font-size:24px;
}

.informacao{
font-size:16px;
}
}