Como vejo seu site agora, as três colunas são responsivas.
Mas se o que você quer é que as 3 colunas encolham no lugar à medida que você estreita a janela (exceto no celular, é claro), você pode tentar isto:
/* Container para segurar as 3 colunas */
#main-outlet-wrapper {
display: flex;
justify-content: space-between;
gap: 20px; /* Ajuste o espaço entre as colunas, se necessário */
}
/* Cada coluna */
.sidebar-wrapper,
#main-outlet,
.custom-right-sidebar {
flex: 1;
padding: 10px;
background-color: #f4f4f4; /* Fundo claro para visibilidade */
border: 1px solid #ddd; /* Borda opcional */
box-sizing: border-box; /* Garanta que o preenchimento seja incluído na largura */
}
@media (max-width: 768px) {
/* Empilhe as colunas em telas menores */
#main-outlet-wrapper {
flex-direction: column;
}
}