Remove the gradient and put caption under image if is-rounded style a…

…pplied (#27869)

* Add alignment fixes for non cropped images

Co-authored-by: Glen Davies <glen.davies@a8c.com>

packages/block-library/src/gallery/style.scss

@@ -24,7 +24,8 @@
 			flex-grow: 1;
 			justify-content: center;
 			position: relative;
-
+			margin-top: auto;
+			margin-bottom: auto;
 			// IE11 doesn't like the "flex-direction: column;" here.
 			@supports ( position: sticky ) {
 				flex-direction: column;
@@ -72,13 +73,52 @@
 					display: inline;
 				}
 			}
+
+			&.is-style-rounded {
+				> div,
+				> a {
+					// Not supported in IE11.
+					@supports ( position: sticky ) {
+						flex: 1 1 auto;
+					}
+				}
+				figcaption {
+					background: none;
+					// Not supported in IE11.
+					@supports ( position: sticky ) {
+						flex: initial;
+						background: none;
+						color: inherit;
+						margin: 0;
+						padding: 10px 10px 9px;
+						position: relative;
+					}
+				}
+			}
 		}
 	}
 
 	figcaption {
 		flex-grow: 1;
 	}
 
+	// Non cropped images.
+	&:not(.is-cropped) {
+		figure.blocks-gallery-grid {
+			figure.wp-block-image:not(#individual-image) {
+				margin-top: auto;
+				margin-bottom: auto;
+				img {
+					margin-bottom: $grid-unit-20;
+				}
+
+				figcaption {
+					bottom: $grid-unit-20;
+				}
+			}
+		}
+	}
+
 	// Cropped Images.
 	&.is-cropped figure.blocks-gallery-grid figure.wp-block-image:not(#individual-image) {
 		> div:not(.components-drop-zone),