.container{
display:flex;
justify-content: center;
gap:20px;
padding:20px;
width:min(100%, 1100px); /* modificado: largura fluida com limite máximo */
max-width:1100px;
margin-inline:auto;
background:hwb(202 72% 5% / 0.714);
border-radius:10px;
box-shadow:2px 4px 8px rgba(0,0,0,0.2);
}

.div1,
.div2{
flex:1;
display:flex;
flex-direction:column;
gap:10px;
padding:20px;
background:white;
border-radius:10px;
box-shadow:2px 4px 8px rgba(0,0,0,0.2);
}

.container-4{
margin-top:10px;
display:flex;
gap:10px;
justify-content:center;
width:min(100%, 1100px); /* modificado: alinhado com container principal */
max-width:1100px;
margin-inline:auto;
padding:10px;
background:hwb(202 72% 5% / 0.714);
border-radius:10px;
box-shadow:2px 4px 8px rgba(0,0,0,0.2);
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media(max-width:900px){

.container{
flex-direction:column;
width:100%; /* modificado: melhor encaixe em telas médias */
}

.container-4{
width:100%;
padding:12px; /* modificado: mantém espaçamento confortável */
}

}