From 1ffb02f9218601eaff6b5b6eebcb99b5ee9600ff Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Mon, 8 Jan 2024 17:42:35 -0300
Subject: [PATCH] Refine pricing cards

---
 .../templates/album/components/Hero.tsx               |  2 +-
 .../templates/album/components/Pricing.tsx            | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/getting-started/templates/album/components/Hero.tsx b/docs/data/material/getting-started/templates/album/components/Hero.tsx
index e5f978fca63616..1b3b863b446e17 100644
--- a/docs/data/material/getting-started/templates/album/components/Hero.tsx
+++ b/docs/data/material/getting-started/templates/album/components/Hero.tsx
@@ -34,7 +34,7 @@ export default function ProductHero() {
         }}
       >
         <Grid container justifyContent="center">
-          <Grid item xs={12} md={6} lg={4}>
+          <Grid item xs={12} md={6} xl={4}>
             <Stack
               direction="column"
               spacing={2}
diff --git a/docs/data/material/getting-started/templates/album/components/Pricing.tsx b/docs/data/material/getting-started/templates/album/components/Pricing.tsx
index 4a09889ee4cc3f..309a60c98bc53a 100644
--- a/docs/data/material/getting-started/templates/album/components/Pricing.tsx
+++ b/docs/data/material/getting-started/templates/album/components/Pricing.tsx
@@ -120,7 +120,7 @@ export default function Pricing() {
               >
                 <CardContent>
                   <Box
-                    sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}
+                    sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}
                   >
                     <Typography variant="h6" gutterBottom>
                       {tier.title}
@@ -167,11 +167,16 @@ export default function Pricing() {
                       &nbsp; per month
                     </Typography>
                   </Box>
-                  <Divider sx={{ my: 2 }} />
+                  <Divider sx={{ my: 3 }} />
                   {tier.description.map((line) => (
                     <Box
                       key={line}
-                      sx={{ display: 'flex', gap: 1, p: 1, alignItems: 'center' }}
+                      sx={{
+                        display: 'flex',
+                        gap: 1.5,
+                        p: 1,
+                        alignItems: 'center',
+                      }}
                     >
                       <CheckCircleRoundedIcon
                         sx={{