Morden: Update suggested changes for image gallery issue

morden/sass/_extra-child-theme.scss

@@ -248,6 +248,68 @@ body {
  * Blocks
  */
 
+// Add space for floated content
+@media only screen and (min-width: 560px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: #{map-deep-get($config-global, "spacing", "horizontal")};
+	}
+	.entry-content > .alignright {
+		margin-left: #{map-deep-get($config-global, "spacing", "horizontal")};
+	}
+}
+
+// Constrain left-aligned blocks
+@media only screen and (min-width: 640px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain right-aligned blocks
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
+	}
+}
+
+// Constrain left-aligned blocks
+@media only screen and (min-width: 782px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain right-aligned blocks
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain left-aligned blocks
+@media only screen and (min-width: 1024px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+// Constrain right-aligned blocks
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
 // Constrain left-aligned blocks
 @media only screen and (min-width: 1280px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),

morden/style-rtl.css

@@ -4189,6 +4189,61 @@ p:not(.site-title) a:hover {
 /**
  * Blocks
  */
+@media only screen and (min-width: 560px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: 16px;
+	}
+	.entry-content > .alignright {
+		margin-right: 16px;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignright {
+		margin-left: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignright {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignright {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
 @media only screen and (min-width: 1280px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
 	.entry-content > .alignleft {

morden/style.css

@@ -4218,6 +4218,61 @@ p:not(.site-title) a:hover {
 /**
  * Blocks
  */
+@media only screen and (min-width: 560px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-right: 16px;
+	}
+	.entry-content > .alignright {
+		margin-left: 16px;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
+	.entry-content > .alignleft {
+		margin-left: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	.entry-content > .alignright {
+		margin-right: calc( 0.5 * (100% - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
+	}
+}
+
 @media only screen and (min-width: 1280px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright),
 	.entry-content > .alignleft {