Refines cards layout

(#4769, #4773, PLG-138)

Author: sergeibbb

src/webviews/apps/welcome/components/feature-carousel.ts

@@ -14,10 +14,6 @@ export class GlFeatureCarousel extends LitElement {
 	static override styles = [
 		css`
 			:host {
-				--gl-carousel-border-radius: 0;
-				--gl-carousel-background-color: transparent;
-				--gl-carousel-padding: 1em;
-
 				display: block;
 				width: 100%;
 			}
@@ -39,10 +35,6 @@ export class GlFeatureCarousel extends LitElement {
 				display: flex;
 				align-items: center;
 				justify-content: center;
-
-				border-radius: var(--gl-carousel-border-radius);
-				background-color: var(--gl-carousel-background-color);
-				padding: var(--gl-carousel-padding);
 			}
 
 			::slotted(*) {

src/webviews/apps/welcome/welcome.css.ts

@@ -141,44 +141,43 @@ const header = css`
 	}
 `;
 
-const carousel = css`
-	gl-feature-carousel {
+const cards = css`
+	.card {
+		border-radius: 0.63em;
+		background-color: var(--vscode-textBlockQuote-background);
+		padding: 1.8em;
 		text-align: initial;
-		--gl-carousel-border-radius: 0.63em;
-		--gl-carousel-padding: 1.8em;
-		--gl-carousel-background-color: var(--vscode-textBlockQuote-background);
 	}
 
 	@media (max-width: 640px) {
-		gl-feature-carousel {
-			--gl-carousel-padding: 1em;
+		.card {
+			padding: 1em;
 		}
 	}
 
 	@media (max-width: 300px) {
-		gl-feature-carousel {
-			--gl-carousel-padding: 0.5em;
+		.card {
+			padding: 0.5em;
 		}
 	}
 
-	gl-feature-carousel h1 {
+	.card h1 {
 		margin: 0;
 		font-size: var(--card-font-size);
 	}
 
-	gl-feature-carousel p {
+	.card p {
 		margin: 0.4em 0 0;
 		font-size: var(--card-font-size);
 	}
 
-	gl-feature-carousel img {
+	.card img {
 		max-width: 100%;
-		height: auto;
 	}
 `;
 
 export const welcomeStyles = css`
 	${colorScheme} ${typography}
 	${heroGradient} ${section} ${header}
-	${carousel}
+	${cards}
 `;

src/webviews/apps/welcome/welcome.ts

@@ -61,13 +61,13 @@ export class GlWelcomeApp extends GlAppHost<State> {
 
 				<div class="section">
 					<gl-feature-carousel>
-						<gl-feature-card>
+						<gl-feature-card class="card">
 							<img slot="image" src="${this.webroot ?? ''}/media/feature-graph.webp" alt="Commit Graph" />
 							<h1>Commit Graph</h1>
 							<p>Visualize your repository's history and interact with commits</p>
 							<p><a href="command:gitlens.showGraph">Open Commit Graph</a></p>
 						</gl-feature-card>
-						<gl-feature-card>
+						<gl-feature-card class="card">
 							<img
 								slot="image"
 								src="${this.webroot ?? ''}/media/feature-timeline.webp"