Apply new CSS

client/overview/modal/progressive-onboarding-eligibility/style.scss

@@ -2,27 +2,33 @@
 	&.components-modal__frame {
 		border-radius: 2px !important;
 		overflow: visible;
+
+		@media screen and ( max-width: $break-small ) {
+			height: fit-content;
+			margin: auto auto;
+			max-width: 90vw;
+		}
 	}
 
 	.components-modal__content {
 		box-sizing: border-box;
-		max-width: 700px;
-		margin: 0;
+		max-width: 516px;
+		margin: 72px 0 0;
 		padding: $gap-larger;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
+		padding: $gap $gap-larger $gap-larger $gap-larger;
+		flex: 1;
+		overflow: auto;
 	}
 
 	.components-modal__header {
-		height: 0;
+		.components-modal__header-heading {
+			font-weight: 300;
+			text-wrap: auto;
+		}
 
 		.components-button {
-			position: absolute;
-			left: initial;
-			top: $gap-smaller;
-			right: $gap-smaller;
-
 			svg {
 				width: 32px;
 				height: 32px;
@@ -31,50 +37,72 @@
 	}
 
 	&__heading {
-		font-size: 40px;
+		font-size: 20px;
 		font-weight: 400;
-		line-height: 60px;
+		line-height: 28px;
 		margin-bottom: $gap-smallest;
 	}
 
 	&__subheading {
 		@include wc-body-large;
-		text-align: center;
-		font-weight: normal;
-		color: $gray-60;
-		max-width: 480px;
+		font-weight: 400;
+		color: $gray-700;
+		font-size: 13px;
+		line-height: 20px;
 		margin: 0 0 $gap-large 0;
+		text-wrap: wrap !important;
 	}
 
 	&__benefits {
-		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		column-gap: $gap-largest;
-		padding: 0 $gap;
-		fill: $studio-woocommerce-purple-50;
-		font-size: 14px;
+		fill: $gray-900;
+		font-size: 13px;
 		line-height: 20px;
-		color: $gray-60;
+		color: $gray-700;
+
+		> div {
+			display: grid;
+			grid-template-columns: auto 1fr;
+			gap: $gap;
+			color: $gray-700;
+			font-weight: 400;
+			font-size: 13px;
+			line-height: 20px;
+		}
+
+		> div:not( :last-child ) {
+			margin-bottom: $gap;
+		}
 
 		svg {
 			display: block;
-			margin: $gap-smaller auto;
+			margin: $gap-smallest 0;
+			color: $gray-900;
 		}
 
 		&__subtitle {
 			@include wp-subtitle;
-			margin: $gap-large 0 $gap-smallest;
+			margin: $gap-smallest 0;
+			font-weight: 600;
+			color: $gray-900;
+			line-height: 20px;
+			font-size: 13px;
 		}
 
 		@media screen and ( max-width: $break-small ) {
 			grid-template-columns: 1fr;
 			row-gap: $gap-large;
+
+			svg {
+				width: 24px;
+				height: 24px;
+			}
 		}
 	}
 
 	&__footer {
-		text-align: center;
-		margin: $gap-large 0;
+		text-align: right;
+		margin: $gap-large 0 0 0;
+		width: 100%;
 
 		& :first-child {
 			margin-right: $gap;
@@ -87,6 +115,11 @@
 			line-height: 20px;
 			height: 40px;
 		}
+
+		@media screen and ( max-width: $break-small ) {
+			text-wrap: nowrap;
+			text-align: center;
+		}
 	}
 
 	&__confetti {