INTERIM-146 Breakpoint improvements for panels with 3 or 4 items

* INTERIM-146 Improve layout of panels with 3 or 4 items in a row as they transition to narrow breakpoints.

* INTERIM-146 Adjusted media query for rows of three items

css/suitcase.css

@@ -1431,7 +1431,7 @@ ul.tabs.secondary img {
     color: #676767;
 }
 
-.panel-panel iframe {
+.panel-pane iframe {
     max-width: 100%;
 }
 
@@ -1495,6 +1495,24 @@ in the panel settings */
     margin-bottom: 1rem;
 }
 
+@media (max-width: 1139px) and (min-width: 600px) {
+
+    .megapanels-pane:first-child:nth-last-child(4),
+    .megapanels-pane:first-child:nth-last-child(4) ~ .megapanels-pane {
+      width: calc(50% - 1rem);
+      flex: 0 1 auto;
+    } 
+}
+
+@media (max-width: 829px) and (min-width: 548px) {
+
+    .megapanels-pane:first-child:nth-last-child(3),
+    .megapanels-pane:first-child:nth-last-child(3) ~ .megapanels-pane {
+      width: calc(50% - 1rem);
+      flex: 0 1 auto;
+    }
+}
+
 /* ---------------------------------------- */
 /* ## BLOCKS 
 /* ---------------------------------------- */