

.responsive-container {
display: grid;
grid-template-columns: 27% 1fr;
gap: 20px;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.columna-1 {
background-color: #f0f0f0;
border-radius: 12px;
padding: 16px;
box-sizing: border-box;
}
.columna-2 {
padding: 0 !important; 
margin: 0 !important;  
box-sizing: border-box;
}
.columna-2 > .columna-1-extract,
.columna-2 > .solo-movil-tablet-vertical {
margin-top: 0 !important;
padding-top: 0 !important;
}
.columna-2 > .columna-1-extract *,
.columna-2 > .solo-movil-tablet-vertical * {
margin-top: 0 !important;
padding-top: 0 !important;
box-sizing: border-box;
}
.columna-1-extract {
background-color: #f0f0f0;
border-radius: 12px;
padding: 16px 16px 5px 16px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 auto !important; 
display: block;
}
.solo-movil-tablet-vertical {
background-color: #f0f0f0;
border-radius: 12px;
padding: 16px 16px 5px 16px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 auto !important; 
display: none;
}
@media screen and (max-width: 1024px) and (orientation: portrait),
screen and (max-width: 768px) {
.responsive-container {
display: block;
}
.columna-1 {
display: none !important;
}
.columna-2 {
width: 100%;
}
.columna-1-extract {
display: none !important;
}
.solo-movil-tablet-vertical {
display: block !important;
}
}