.settings-container { margin: 2rem auto; padding: 0 1rem; h3 { color: var(--mat-sys-primary); font-weight: 500; } .settings-section { margin-bottom: 2rem; h5 { color: var(--mat-sys-primary); font-size: 1rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-weight: 400; } .two-column-grid { display: grid; grid-template-columns: 1fr 7fr; gap: 1rem; align-items: center; .label { padding-right: 1rem; padding-bottom: 2rem; font-size: 0.875rem; } .control { mat-form-field { width: 50%; min-width: 150px; } .pageSize { width: 20%; } } } .form-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 16px; } } } /* Responsive adjustments */ @media (max-width: 600px) { .settings-container .table-setting .two-column-grid { grid-template-columns: 1fr; gap: 0.5rem; .label { text-align: left; padding-right: 0; } } }