diff --git a/client/my-sites/customer-home/cards/tasks/domain-upsell/style.scss b/client/my-sites/customer-home/cards/tasks/domain-upsell/style.scss
index 035094234342d..8c91369a642ba 100644
--- a/client/my-sites/customer-home/cards/tasks/domain-upsell/style.scss
+++ b/client/my-sites/customer-home/cards/tasks/domain-upsell/style.scss
@@ -1,3 +1,6 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
 $illustration-top: 32px;
 $illustration-layer-offset: 16px;
 $illustration-height: 139px;
@@ -7,9 +10,12 @@ $illustration-width: 214px;
 	&.task__domain-upsell {
 		.task__illustration {
 			display: flex;
-			width: calc(45% + 32px);
-			margin-bottom: -32px !important;
-			margin-right: -32px !important;
+			
+			@include break-small {
+				width: calc(45% + 32px);
+				margin-bottom: -32px !important;
+				margin-right: -32px !important;
+			}
 		}
 	}
 	.task__domain-upsell-illustration {
diff --git a/client/my-sites/customer-home/cards/tasks/style.scss b/client/my-sites/customer-home/cards/tasks/style.scss
index fd24c593c1a1c..109c465770829 100644
--- a/client/my-sites/customer-home/cards/tasks/style.scss
+++ b/client/my-sites/customer-home/cards/tasks/style.scss
@@ -3,12 +3,14 @@
 
 .task {
 	display: flex;
+	flex-direction: column;
 	position: relative;
 	margin-top: 0;
 	margin-bottom: 30px;
 	border-radius: 3px;
 
-	@include breakpoint-deprecated( ">660px" ) {
+	@include break-small {
+		flex-direction: row;
 		box-shadow: 0 0 0 1px var(--color-border-subtle);
 		margin-bottom: 16px;
 	}
@@ -16,13 +18,12 @@
 	.task__text,
 	.task__illustration {
 		box-sizing: border-box;
-		padding: 24px 24px 0;
 
-		@include breakpoint-deprecated( ">660px" ) {
+		@include break-small {
 			padding: 24px 16px;
 		}
 
-		@include breakpoint-deprecated( ">1040px" ) {
+		@include break-xlarge {
 			padding: 32px 24px;
 		}
 	}
@@ -35,11 +36,17 @@
 	}
 
 	.task__illustration {
-		width: 33.33%;
+		width: 100%;
 		align-self: center;
 		flex-shrink: 0;
 		margin-left: auto;
 		text-align: center;
+		margin-top: 32px;
+		
+		@include break-small {
+			width: 33.33%;
+			margin-top: 0;
+		}
 	}
 
 	.task__timing {
@@ -66,7 +73,7 @@
 		line-height: 36px;
 		margin-bottom: 16px;
 
-		@include breakpoint-deprecated( ">800px" ) {
+		@include break-medium {
 			line-height: 40px;
 		}
 	}
@@ -77,7 +84,7 @@
 		line-height: 24px;
 		color: var(--color-text-subtle);
 		
-		@include breakpoint-deprecated( ">800px" ) {
+		@include break-medium {
 			line-height: 28px;
 			margin-bottom: 32px;
 		}
diff --git a/client/my-sites/customer-home/style.scss b/client/my-sites/customer-home/style.scss
index 32d99c22067d4..9e926900e8a79 100644
--- a/client/my-sites/customer-home/style.scss
+++ b/client/my-sites/customer-home/style.scss
@@ -299,10 +299,6 @@ body.is-section-home.theme-default.color-scheme {
 			margin-right: 0;
 		}
 
-		.task__illustration {
-			text-align: right;
-		}
-
 		// 32px spacing for everything except the space before the CTA (48px)
 		.task__text {
 			gap: 16px;