Correctly applied styles to Figure component in docs (#6894)

It turns out the styles that we had in `style.modules.css` were
overridden by browser defaults.

## Before


![image](https://github.com/Unleash/unleash/assets/107407814/c43dee92-c055-4e16-a632-c462dbf3ed59)


## After


![image](https://github.com/Unleash/unleash/assets/107407814/de84166a-8798-4be7-8639-6cae042fc89f)


Now taking into account all the styles that were in the CSS files
(notice margin and border)

website/src/components/Figure/Figure.tsx

@@ -66,8 +66,7 @@
 // biome-ignore lint/style/useImportType: <explanation>
 import React from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import './styles.module.css';
+import styles from './styles.module.css';
 
 type Props = {
     // An optional alt text, if the caption does not already convey all relevant
@@ -81,7 +80,7 @@ type Props = {
 
 const Component: React.FC<Props> = ({ img, alt, caption }) => {
     return (
-        <figure>
+        <figure className={styles.figure}>
             <img alt={alt} src={useBaseUrl(img)} />
             <figcaption>{caption}</figcaption>
         </figure>

website/src/components/Figure/styles.module.css

@@ -1,5 +1,5 @@
 /* Figures (with captions) */
-.main-wrapper figure {
+.figure {
     box-shadow: var(--ifm-global-shadow-lw);
     border-radius: var(--ifm-global-radius);
     border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
@@ -7,16 +7,16 @@
     margin-inline: 0;
 }
 
-figure img {
+.figure img {
     box-shadow: none;
     border: none;
 }
 
-figure * + * {
+.figure * + * {
     margin-block-start: var(--ifm-pre-padding);
 }
 
-figcaption {
+.figure figcaption {
     font-size: var(--unleash-font-size-smaller);
     padding-inline: var(--ifm-pre-padding);
     border-inline-start: 5px solid var(--ifm-color-primary);