Make normal alignment work

* Now it gives right sizes for both.
* Improve breakpoint for change from full width to not full width.

planet4-gutenberg-blocks.php

@@ -429,7 +429,11 @@ function ( $std_class_object ) {
 		'width'  => '720px',
 	],
 	[
-		'screen' => 600,
+		'screen' => 601,
+		'width'  => '540px',
+	],
+	[
+		'screen' => 577,
 		'width'  => '540px',
 	],
 ];
@@ -467,13 +471,37 @@ function ( $breakpoint ) use ( $column_count ) {
 
 		if ( 'core/media-text' === $block['blockName'] && $instance->attributes['mediaId'] ) {
 			$media_id = $instance->attributes['mediaId'];
-			$width    = $instance->attributes['mediaWidth'] ?? 50;
+			$media_width    = $instance->attributes['mediaWidth'] ?? 50;
 
 			$srcset = wp_get_attachment_image_srcset( $media_id, 'full' );
 
-			$stack_mobile = ! $instance->attributes['isStackedOnMobile'] ? '' : '(max-width: 600px) 100vw, ';
-
-			$sizes_attr = "sizes=\"{$stack_mobile}{$width}vw\"";
+			if ( $instance->attributes['align'] === 'full' ) {
+				$sizes = ! $instance->attributes['isStackedOnMobile']
+					? "${media_width}vw"
+					: "(min-width: 601px) {$media_width}vw, 100vw";
+
+				$sizes_attr = "sizes=\"{$sizes}\"";
+			} else {
+				$default = ! $instance->attributes['isStackedOnMobile'] ? "calc((100vw - 24px) * $media_width / 100)"
+					: 'calc(100vw - 24px)';
+				$sizes   = implode(
+					',',
+					array_map(
+						function ( $breakpoint ) use ( $instance, $media_width ) {
+							$screen       = $breakpoint['screen'];
+							$container    = $breakpoint['width'];
+							$should_stack = $screen < 600 && $instance->attributes['isStackedOnMobile'];
+							$fraction     = $should_stack ? 1 : round( 100 / $media_width, 4 );
+
+							// Currently, we need to subtract 24px for Bootstrap container.
+							return "(min-width: ${screen}px) calc(($container - 24px) / $fraction)";
+						},
+						$breakpoints
+					)
+				);
+
+				$sizes_attr = "sizes=\"{$sizes}, {$default}\"";
+			}
 
 			$image_class_start = "class=\"wp-image-$media_id ";