Documentation: Fix ReadTheDocs's narrow viewport layout issues

Closes #3883

(Internal change: 2386236)

Author: jacksonhvisuals

docs/_static/css/pxr_custom.css

@@ -5,6 +5,11 @@
     --monospace: ui-monospace, -apple-system-ui-serif, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, 'Andale Mono', 'Ubuntu Mono', monospace;
 }
 
+.document {
+  container-type: inline-size;
+  container-name: document;
+}
+
 body, .rst-content {
     font-family: var(--san-serif);
 }
@@ -37,6 +42,10 @@ h4 {
   text-decoration: underline;
 }
 
+.mono {
+  overflow-wrap: break-word;
+}
+
 .mono, .rst-content .linenodiv pre, .rst-content div[class^=highlight] pre, .rst-content pre.literal-block {
   font-family: var(--monospace)
 }
@@ -153,3 +162,24 @@ div.usd-tutorial-admonition > p {
   color: #6A0E0E;
 } 
 
+@container document (max-width: 72rem) {
+  .fourcolumn {
+    -webkit-column-count: 3; /* Chrome, Safari, Opera */
+    -moz-column-count: 3; /* Firefox */
+    column-count: 3;
+  }
+}
+
+@container document (max-width: 48rem) {
+  .fourcolumn {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+  }
+
+  .threecolumn {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+  }
+}