Fix Image Gallery alignment issues

varia/sass/abstracts/_responsive-logic.scss

@@ -131,26 +131,31 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(mobile) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-sm}) );
+		max-width: calc( 0.5 * #{$content-width-sm} );;
 	}
 
 	@include media(tablet) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-md}) );
+		max-width: calc( 0.5 * #{$content-width-md} );;
 	}
 
 	@include media(laptop) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );;
 	}
 
 	@include media(desktop) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );;
 	}
 
 	@include media(wide) {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );;
 	}
 }
 
@@ -162,26 +167,31 @@ $content-width-xxl: calc( #{map-deep-get($config-global, "breakpoint", "xxl")} -
 	@include media(mobile) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-sm}) );
+		max-width: calc( 0.5 * #{$content-width-sm} );;
 	}
 
 	@include media(tablet) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-md}) );
+		max-width: calc( 0.5 * #{$content-width-md} );;
 	}
 
 	@include media(laptop) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );;
 	}
 
 	@include media(desktop) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );;
 	}
 
 	@include media(wide) {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - #{$content-width-lg}) );
+		max-width: calc( 0.5 * #{$content-width-lg} );;
 	}
 }
 

varia/sass/blocks/utilities/_style.scss

@@ -15,6 +15,9 @@
 }
 
 .entry-content > .alignleft {
+	/*rtl:ignore*/
+	float: left;
+
 	@extend %responsive-alignleft;
 }
 
@@ -43,6 +46,9 @@
 }
 
 .entry-content > .alignright {
+	/*rtl:ignore*/
+	float: right;
+
 	@extend %responsive-alignright;
 }
 

varia/sass/layout/_structure.scss

@@ -151,8 +151,17 @@
 	}
 
 	/* Reset alignleft and alignright margins after alignfull */
-	&.alignfull + .alignleft,
+	&.alignfull + .alignleft {
+		float: left;
+		margin-top: map-deep-get($config-global, "spacing", "vertical");
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
+
 	&.alignfull + .alignright {
+		float: right;
 		margin-top: map-deep-get($config-global, "spacing", "vertical");
+		margin-left: 1rem;
+		margin-right: 1rem;
 	}
 }

varia/style-rtl.css

@@ -2374,6 +2374,10 @@ table th,
 	margin-bottom: 32px;
 }
 
+.entry-content > .alignleft {
+	float: left;
+}
+
 /**
  * .aligncenter
  */
@@ -2396,6 +2400,10 @@ table th,
 	margin-left: 16px;
 }
 
+.entry-content > .alignright {
+	float: right;
+}
+
 .entry-content * > .alignleft + *,
 .entry-content * > .alignright + * {
 	margin-top: 0;
@@ -3762,30 +3770,35 @@ img#wpstats {
 @media only screen and (min-width: 560px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
 	}
 }
 
 @media only screen and (min-width: 640px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
 	}
 }
 
 @media only screen and (min-width: 782px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - 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 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
 @media only screen and (min-width: 1280px) {
 	.entry-content > .alignright {
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3796,30 +3809,35 @@ img#wpstats {
 @media only screen and (min-width: 560px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
 	}
 }
 
 @media only screen and (min-width: 640px) {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		margin-left: calc( 0.5 * (100vw - 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 * (100vw - 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 * (100vw - 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 {
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 

varia/style.css

@@ -1007,9 +1007,18 @@ footer {
 	margin-bottom: 0;
 }
 
-.entry-content > *.alignfull + .alignleft,
+.entry-content > *.alignfull + .alignleft {
+	float: left;
+	margin-top: 32px;
+	margin-left: 1rem;
+	margin-right: 1rem;
+}
+
 .entry-content > *.alignfull + .alignright {
+	float: right;
 	margin-top: 32px;
+	margin-left: 1rem;
+	margin-right: 1rem;
 }
 
 /**
@@ -2377,6 +2386,11 @@ table th,
 	margin-bottom: 32px;
 }
 
+.entry-content > .alignleft {
+	/*rtl:ignore*/
+	float: left;
+}
+
 /**
  * .aligncenter
  */
@@ -2401,6 +2415,11 @@ table th,
 	margin-left: 16px;
 }
 
+.entry-content > .alignright {
+	/*rtl:ignore*/
+	float: right;
+}
+
 .entry-content * > .alignleft + *,
 .entry-content * > .alignright + * {
 	margin-top: 0;
@@ -3781,6 +3800,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
 	}
 }
 
@@ -3788,6 +3808,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
 	}
 }
 
@@ -3795,6 +3816,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3802,6 +3824,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3809,6 +3832,7 @@ img#wpstats {
 	.entry-content > .alignright {
 		/*rtl:ignore*/
 		margin-right: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3821,6 +3845,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 560px - 32px)));
+		max-width: calc( 0.5 * calc( 560px - 32px));
 	}
 }
 
@@ -3828,6 +3853,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 640px - 32px)));
+		max-width: calc( 0.5 * calc( 640px - 32px));
 	}
 }
 
@@ -3835,6 +3861,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3842,6 +3869,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }
 
@@ -3849,6 +3877,7 @@ img#wpstats {
 	.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft {
 		/*rtl:ignore*/
 		margin-left: calc( 0.5 * (100vw - calc( 782px - 32px)));
+		max-width: calc( 0.5 * calc( 782px - 32px));
 	}
 }