Make cys intro page responsive (#40725)

* Make cys intro page responsive

* Add changelog

* Change min-width to 820px

* Change color prompt version

plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/colorChoices.ts

@@ -268,7 +268,7 @@ export const defaultColorPalette = {
 	queryId: 'default_color_palette',
 
 	// make sure version is updated every time the prompt is changed
-	version: '2023-09-22',
+	version: '2023-10-12',
 	prompt: ( businessDescription: string, look: Look | '', tone: string ) => {
 		return `
             You are a WordPress theme expert designing a WooCommerce site. Analyse the following store description, merchant's chosen look and tone, and determine the most appropriate color scheme, along with 8 best alternatives.

plugins/woocommerce-admin/client/customize-store/intro/intro.scss

@@ -79,6 +79,8 @@
 
 .woocommerce-customize-store-main {
 	margin-right: 2.5rem;
+	width: 100%;
+	min-width: 820px;
 
 	p {
 		color: #2f2f2f;
@@ -104,7 +106,7 @@
 	display: flex;
 	margin: 1.25rem 0 3.375rem;
 	min-height: 248px;
-	width: 820px;
+	width: 100%;
 	align-items: center;
 
 	&.offline-banner {
@@ -149,21 +151,33 @@
 }
 
 .woocommerce-customize-store-theme-cards {
-	display: flex;
+	display: grid;
 	flex-wrap: wrap;
 	gap: 32px;
 	row-gap: 54px;
-	max-width: 820px;
+	grid-template-columns: repeat(2, 1fr);
+
+	@media only screen and (min-width: 1600px) {
+		grid-template-columns: repeat(4, 1fr);
+	}
 
 	.theme-card {
-		flex-basis: 45%;
 		display: block;
 		text-decoration: none;
 
+		a {
+			&:focus {
+				box-shadow: none;
+			}
+		}
+
 		img {
 			border-radius: 4px;
 			border: 1px solid #e9e9e9;
-			width: 394px;
+			width: 100%;
+			height: 240px;
+			object-fit: cover;
+			object-position: 0 0;
 		}
 
 		.theme-card__title {

plugins/woocommerce/changelog/update-make-cys-intro-responsive

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Make cys intro page responsive