/* Keep site content inside the viewport; wide tables and readers scroll locally. */
@media (max-width: 991.98px) {
	html { overflow-x: clip; }
	body, .wrapper, #main-content { width: 100%; max-width: 100%; min-width: 0; }
	.container, .container-fluid { max-width: 100%; }
	.row > [class*="col-"],
	.lms-course-detail__main,
	.lms-course-sidebar,
	.lms-catalog__results,
	.lms-course-card__body { min-width: 0; }
	.container img, .container video, .container iframe,
	.container-fluid img, .container-fluid video, .container-fluid iframe { max-width: 100%; }
	#main-content h1, #main-content h2, #main-content h3,
	#main-content h4, #main-content h5,
	.lms-panel__body, .course-overview-text { overflow-wrap: anywhere; }
	.lms-course-detail .lms-course-detail__layout,
	.lms-catalog .lms-catalog__layout { grid-template-columns: minmax(0, 1fr); }
	.lms-course-detail .lms-breadcrumb { flex-wrap: wrap; min-width: 0; }
	.lms-breadcrumb > * { min-width: 0; overflow-wrap: anywhere; }
	.lms-panel__body { max-width: 100%; overflow-x: auto; }
	.table-responsive, .dataTables_wrapper { min-width: 0; max-width: 100%; overflow-x: auto; }
	#main-content pre { max-width: 100%; overflow-x: auto; }
	.module-actions a { white-space: normal; overflow-wrap: anywhere; }
	.lms-course-card__heading, .lms-course-card__meta, .lms-course-card__actions { min-width: 0; flex-wrap: wrap; }
	.lms-course-card__title, .lms-course-card__meta-item { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 575.98px) {
	/* Nested Bootstrap containers should share one mobile gutter. */
	#main-content > .container > section > .container { padding-left: 0; padding-right: 0; }
	.course-curriculum-panel { padding: 16px !important; }
	.lms-course-detail .lms-enroll-card { min-width: 0; max-width: 100%; }
}