standardize <figure> and <figCaption> styles

docs/pages/blog/mui-x-v7.md

@@ -56,11 +56,11 @@ The Data Grid now offers a more responsive experience with smoother scrolling an
 
 On its first announcement, some of these improvements were showcased, but during the beta phase, the scrolling performance was further polished for an even better user experience.
 
-<figure style="padding:0; margin:0">
+<figure>
   <video preload="metadata" autoplay muted loop playsinline width="690" height="417" controls>
     <source src="/static/blog/mui-x-v7/sticky-headers-and-vertical-scrolling.mp4" type="video/mp4">
   </video>
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption>
+  <figcaption>A before and after showcase, first with horizontal and then with vertical scrolling.</figcaption>
 </figure>
 
 :::warning
@@ -81,9 +81,9 @@ As part of an overarching project aimed at enhancing usability in managing colum
 
 The goal is to further enhance this panel by incorporating additional column management functions, such as column reordering and pinning. Additionally, the internal component has been extracted to ease the introduction of the upcoming pivoting UI.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img width="310" alt="The new column management panel design" src="/static/blog/mui-x-v7/column-management-panel.png">
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">The new column managemeent panel design</figcaption>
+  <figcaption>The new column managemeent panel design</figcaption>
 </figure>
 
 ### Date Object support in filter model
@@ -98,9 +98,9 @@ Introducing a separate entry point for locales has significantly reduced the bun
 
 As a reference, with the `@mui/x-data-grid` npm package, this change led to a reduction of approximately 19% – shrinking the bundle size from [114.2kB](https://bundlephobia.com/package/@mui/[email protected]) to [92.9kB](https://bundlephobia.com/package/@mui/[email protected]).
 
-<figure style="padding:0; margin:0">
+<figure>
   <img width="600" alt="A chart showcasing the bundle size change" src="/static/blog/mui-x-v7/new-bundle-size.png" >
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A chart showcasing the Data Grid's bundle size change.</figcaption>
+  <figcaption>A chart showcasing the Data Grid's bundle size change.</figcaption>
 </figure>
 
 ### New stable features
@@ -233,9 +233,9 @@ The newest gauge charts are designed to offer a visually compelling way to displ
 These charts are particularly useful for showing progress toward a goal or displaying a value within a predefined range.
 With customizable options for pointers, sizes, and colors, they allow for a personalized visual representation that makes it easy for users to interpret data at a glance.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="Gauge charts" src="/static/blog/mui-x-v7/gauge-charts.png" width="1200" height="800" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">Three different styles of Gauge charts.</figcaption>
+  <figcaption>Three different styles of Gauge charts.</figcaption>
 </figure>
 
 Check out the [new charts](/x/react-charts/gauge/) documentation page for detailed information.
@@ -246,9 +246,9 @@ The charts now have click event handlers, so users can interact with chart eleme
 
 This feature makes charts more interactive and transforms the way users can explore the data, improving the overall user experience with details and other information accessed on demand.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="Gauge charts" src="/static/blog/mui-x-v7/click-handler.png" width="450" height="416" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A pie chart with an item click handler.</figcaption>
+  <figcaption>A pie chart with an item click handler.</figcaption>
 </figure>
 
 You can find more information about specific event handlers for each type of chart by visiting their respective overview page:
@@ -261,9 +261,9 @@ You can find more information about specific event handlers for each type of cha
 
 The Axis component now features a built-in Grid, offering users a structured layout for easier data analysis and visualization.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="A Chart axis showcasing an horizontal grid" src="/static/blog/mui-x-v7/axis-grid.png" width="1550" height="654" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A Chart axis with an horizontal grid.</figcaption>
+  <figcaption>A Chart axis with an horizontal grid.</figcaption>
 </figure>
 
 For details on its usage and configuration, please refer to the [Grid section](/x/react-charts/axis/#grid) in the documentation.
@@ -272,9 +272,9 @@ For details on its usage and configuration, please refer to the [Grid section](/
 
 The `ChartsReferenceLine` component enhances data visualization, providing users with a clear reference to better understand and analyze key data points.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <img alt="A chart with a reference line" src="/static/blog/mui-x-v7/charts-reference-line.png" width="1200" height="840" loading="lazy" />
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A line chart using a reference line.</figcaption>
+  <figcaption>A line chart using a reference line.</figcaption>
 </figure>
 
 You can find more details on its [documentation](/x/react-charts/axis/#reference-line).
@@ -315,11 +315,11 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 The latest addition to the Date and Time Pickers suite is the `<DateTimeRangePicker />`, a most anticipated component designed to enrich the user experience with the advanced date and time selection.
 This intuitive picker simplifies the process of selecting date and time ranges, making it ideal for applications that require detailed scheduling or period selection.
 
-<figure style="padding:0; margin:0; margin-bottom:20px">
+<figure>
   <video preload="metadata" autoplay muted loop playsinline width="600" height="510">
     <source src="/static/blog/mui-x-v7/date-time-range-picker.mp4" type="video/mp4">
   </video>
-  <figcaption style="color: #888; font-size: 0.9em; text-align: center;">A video showcasing a date and time range selection.</figcaption>
+  <figcaption>A video showcasing a date and time range selection.</figcaption>
 </figure>
 
 Learn how to use and customize the [new component](/x/react-date-pickers/date-time-range-picker/) now!

docs/src/modules/components/TopLayoutBlog.js

@@ -180,6 +180,19 @@ const Root = styled('div')(
         margin: 'auto',
         marginBottom: 16,
       },
+      '& figure': {
+        margin: 0,
+        padding: 0,
+        marginBottom: 16,
+        '& img, & video': {
+          marginBottom: 8,
+        },
+      },
+      '& figcaption': {
+        color: (theme.vars || theme).palette.text.tertiary,
+        fontSize: theme.typography.pxToRem(14),
+        textAlign: 'center',
+      },
       '& strong': {
         color: (theme.vars || theme).palette.grey[900],
       },