diff --git a/docs/css/responsiveness/container-queries.mdx b/docs/css/responsiveness/container-queries.mdx
index e345ed2..f6e0258 100644
--- a/docs/css/responsiveness/container-queries.mdx
+++ b/docs/css/responsiveness/container-queries.mdx
@@ -1 +1,135 @@
-
\ No newline at end of file
+---
+title: "CSS Container Queries"
+description: "Learn how to use CSS Container Queries to style components based on the size of their parent container, enabling true component-level responsiveness."
+keywords: [CSS Container Queries, '@container', container-type, container-name, component responsiveness, local scoping]
+tags: [css, responsiveness, container-queries, '@container', component-design, local-scoping, modern-css, container-type, container-name]
+sidebar_label: "Container Queries"
+---
+
+Container Queries are a modern, powerful feature in CSS that allows you to apply styles to an element based on the dimensions (size or style) of its nearest ancestor with containment set, rather than the global viewport size.
+
+This is a paradigm shift in responsive design, moving from a page-centric approach to a **component-centric** approach.
+
+
+
+
+## 1. The Problem Solved
+
+### Media Queries vs. Container Queries
+
+Historically, we relied on **Media Queries** (`@media`).
+
+ * **Media Queries:** Apply styles based on the size of the **viewport** (the browser window). If a small card component is placed in a narrow sidebar on a large screen, a media query for a large screen would make the card look bad because it only checks the global size.
+
+**Container Queries** (`@container`) solve this:
+
+ * **Container Queries:** Apply styles based on the size of the **parent element** (the container). The card component can now adjust its layout (e.g., stack its elements) when its container is narrow, regardless of whether the user is on a mobile phone or a large desktop monitor.
+
+## 2. Setting Up the Container
+
+Before you can query a container, you must establish it using the `container` or `container-type` property on the parent element.
+
+### 2.1. `container-type` (Required)
+
+This property defines what kind of dimension is being queried.
+
+| Value | Description | Use Case |
+| :--- | :--- | :--- |
+| **`size`** | Queries both the **width and height**. | Rarely used, as it can cause infinite layout loops. |
+| **`inline-size`** | Queries the size in the direction of text flow (usually **width**). | Most common and safest choice for block elements. |
+| **`normal`** | The default, no containment established. | |
+
+### 2.2. `container-name` (Optional but Recommended)
+
+For clarity and to prevent ambiguity when containers are nested, you can give your container a name.
+
+
+
+
+### Setup Shorthand
+
+The `container` shorthand combines both properties:
+
+```css title="styles.css"
+/* Applied to the PARENT element */
+.sidebar-module {
+ /* Establishes containment and gives it a name for targeting */
+ container: card-container / inline-size;
+ /* Equivalent to:
+ container-name: card-container;
+ container-type: inline-size; */
+}
+```
+
+## 3. The `@container` Rule
+
+Once the parent is defined, you can use the `@container` rule on its children to apply responsive styles.
+
+### 3.1. Syntax
+
+The syntax is similar to a media query, but it uses the container's size instead of the viewport's size.
+
+```css title="styles.css"
+@container [container-name] ([query-feature]) {
+ /* Styles for the child element */
+}
+```
+
+In the example above:
+* **Container Name** (optional) specifies which container to query. If omitted, it queries the nearest ancestor with containment.
+* **Query Feature** is the condition based on the container's dimensions (e.g., `min-width: 400px`).
+
+### 3.2. Query Features
+
+The features are size-based and mirror those used in media queries:
+
+ * `min-width` / `max-width` (based on container width)
+ * `min-height` / `max-height` (based on container height)
+ * `min-inline-size` / `max-inline-size` (most common)
+
+### Example: Component Responsiveness
+
+```css title="styles.css"
+/* Styles applied to a child element inside .sidebar-module */
+.card-content {
+ display: flex; /* Default horizontal layout */
+ gap: 1rem;
+}
+
+/* Query the parent named 'card-container' */
+@container card-container (max-width: 400px) {
+ .card-content {
+ /* When the parent container is narrow, stack the children */
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .card-content img {
+ /* Shrink the image when the container is small */
+ width: 100%;
+ height: auto;
+ }
+}
+```
+
+
+
+
+## 4. Logical Operators
+
+Like media queries, you can combine queries using `and`, `not`, and the comma for `or`.
+
+```css title="styles.css"
+@container (min-width: 300px) and (max-width: 500px) {
+ /* Styles apply only if the container width is between 300px and 500px */
+}
+```
+
+## Interactive Container Query Demo
+
+Observe how the internal structure of the `Card` component changes when you resize the outer container, regardless of the overall viewport size.
+
+
\ No newline at end of file
diff --git a/docs/css/responsiveness/fluid-layouts.mdx b/docs/css/responsiveness/fluid-layouts.mdx
index e345ed2..aed1ac3 100644
--- a/docs/css/responsiveness/fluid-layouts.mdx
+++ b/docs/css/responsiveness/fluid-layouts.mdx
@@ -1 +1,130 @@
-
\ No newline at end of file
+---
+title: "Fluid Layouts (Relative Units and Flex/Grid)"
+description: "Master the use of relative units, Flexbox, and CSS Grid to create layouts that are inherently flexible and adapt their dimensions based on the viewport and container size."
+keywords: [fluid layout, relative units, vw, vh, percentage, flexbox, CSS Grid, intrinsic design, responsive web design]
+tags: [fluid layout, relative units, vw, vh, percentage, flexbox, CSS Grid, intrinsic design, responsive web design]
+sidebar_label: Fluid Layouts
+---
+
+A **fluid layout** (also known as a liquid layout) is one where the widths of the elements are set using relative units (like percentages or viewport units) rather than fixed pixel values. This makes the layout inherently flexible, expanding and contracting smoothly as the browser window resizes, ensuring space is always maximized.
+
+Fluid layouts are a key component of modern responsive design, working hand-in-hand with Media Queries and Container Queries.
+
+
+
+
+## 1. Core Principle: Avoiding Fixed Units
+
+The goal of a fluid layout is to ensure that no part of the design can cause horizontal scrollbars unless absolutely necessary.
+
+| Unit Type | Behavior | Fluid Use |
+| :--- | :--- | :--- |
+| **Fixed** (`px`, `pt`) | Stays the same regardless of screen size. | Used only for properties that should *not* change (e.g., border thickness, max-width limits). |
+| **Relative** (`%`, `vw`, `em`) | Changes based on the parent, root, or viewport size. | Used for widths, heights, margins, and padding. |
+
+### Using Percentages (`%`)
+
+Percentages are relative to the parent element. This is the oldest and most fundamental fluid unit.
+
+```css title="styles.css"
+.parent {
+ width: 900px; /* The maximum size */
+}
+
+.child {
+ /* This child will always take up 50% of the parent's current width */
+ width: 50%;
+ padding: 2%; /* Padding is also relative to the parent's width */
+}
+```
+
+### Using Viewport Units (`vw`, `vh`)
+
+Viewport units are relative to the size of the browser window itself.
+
+ * **`vw` (Viewport Width):** $1\%$ of the viewport width.
+ * **`vh` (Viewport Height):** $1\%$ of the viewport height.
+
+```css title="styles.css"
+.hero-section {
+ /* Sets the height of the hero section to 60% of the viewport height */
+ height: 60vh;
+}
+```
+
+
+
+
+## 2. Flexbox for Fluid Distribution
+
+Flexbox is ideal for creating one-dimensional (row or column) fluid layouts where content needs to distribute space evenly or according to defined ratios.
+
+### Example: Fluid Navigation Bar
+
+Using `flex-grow` ensures that unused space is distributed evenly among the items.
+
+```css title="styles.css"
+.navbar {
+ display: flex;
+ justify-content: space-between;
+}
+
+.nav-item {
+ /* Allows the item to grow and shrink as needed */
+ flex-grow: 1;
+ text-align: center;
+ padding: 1rem 0;
+
+ /* Setting a base width allows the item to grow proportionally */
+ flex-basis: 0;
+}
+```
+
+## 3. CSS Grid for Two-Dimensional Fluidity
+
+CSS Grid is the ultimate tool for two-dimensional fluid layouts, especially when dealing with major page sections (header, sidebar, main content).
+
+### The `fr` Unit
+
+The `fr` (fractional unit) is the most powerful tool for fluid Grid design. It represents a fraction of the available space in the grid container.
+
+### Example: Fluid Sidebar Layout
+
+```css title="styles.css"
+.page-layout {
+ display: grid;
+ padding: 20px;
+ /* Define two columns: one takes 1 fraction, the main content takes 3 fractions */
+ grid-template-columns: 1fr 3fr;
+ gap: 20px;
+}
+```
+
+In this example, the sidebar will always be one-quarter ($1/4$) of the total available width, and the main content will be three-quarters ($3/4$), ensuring the layout is always perfectly proportional, regardless of the screen size.
+
+
+
+
+### `minmax()` Function
+
+The `minmax()` function prevents columns from becoming too narrow or too wide. This combines fluid width with fixed limits, creating a highly resilient design.
+
+```css title="styles.css"
+.responsive-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+```
+
+ * **Explanation:** This creates columns that are *at least* 300px wide (`minmax(300px, 1fr)`). If the remaining space allows for more than one column, they are created. The `1fr` ensures they all share the available space equally, but they will never shrink below 300px.
+
+## Interactive Fluid Layout Demo
+
+This demo shows a two-column layout using the `fr` unit. Resize the pane to see the columns maintain their 1:2 ratio.
+
+
+
+In this example, the sidebar and main content areas adjust their widths fluidly based on the viewport size, maintaining their proportional relationship while ensuring usability across devices.
\ No newline at end of file
diff --git a/docs/css/responsiveness/media-queries.mdx b/docs/css/responsiveness/media-queries.mdx
index e345ed2..2cdebe6 100644
--- a/docs/css/responsiveness/media-queries.mdx
+++ b/docs/css/responsiveness/media-queries.mdx
@@ -1 +1,174 @@
-
\ No newline at end of file
+---
+title: "CSS Media Queries"
+description: "Master CSS Media Queries to create truly responsive designs, adapting layouts, styles, and content based on screen size, orientation, and device capabilities."
+keywords: [CSS Media Queries, responsive design, breakpoints, min-width, max-width, mobile-first, desktop-first, prefers-color-scheme, orientation]
+tags: [CSS Media Queries, responsive design, breakpoints, min-width, max-width, mobile-first, desktop-first, prefers-color-scheme, orientation]
+sidebar_label: Media Queries
+---
+
+CSS Media Queries are a fundamental feature of modern web development, allowing you to apply specific sets of CSS rules only when certain conditions are met by the user's device or environment.
+
+This is the technology that makes it possible to build **responsive websites**—layouts that adapt fluidly to screen size, orientation, and device capabilities (like touch vs. mouse).
+
+
+
+
+## 1. Media Query Syntax
+
+A media query starts with the `@media` rule, followed by an optional **Media Type** and one or more **Media Features** (conditions).
+
+```css title="styles.css"
+@media [media type] and ([media feature]) {
+ /* CSS rules to apply when the conditions are met */
+}
+```
+
+In the example above:
+* **Media Type** specifies the category of device (e.g., `screen`, `print`).
+* **Media Feature** is a condition that must be true (e.g., `min-width: 768px`).
+
+### 1.1. Media Types
+
+The media type defines the broad category of device the styles apply to.
+
+| Type | Description |
+| :--- | :--- |
+| **`screen`** | For color screens (desktops, tablets, phones, smartwatches). (Most common) |
+| **`print`** | For paginated materials (e.g., printed documents). |
+| **`all`** | For all media types (Default if type is omitted). |
+
+### 1.2. Media Features (The Conditions)
+
+Media features are the conditions, enclosed in parentheses, that must be met. The most common feature is `width`.
+
+```css title="styles.css"
+@media screen and (min-width: 768px) {
+ /* CSS rules inside this block only apply when the screen is 768px wide OR WIDER. */
+}
+```
+
+
+
+
+### 1.3. Logical Operators
+
+You can combine features using logical operators:
+
+| Operator | Description | Example |
+| :--- | :--- | :--- |
+| **`and`** | Combines multiple features; all must be true. | `(min-width: 600px) and (orientation: landscape)` |
+| **`not`** | Negates an entire query or type. | `@media not screen and (max-width: 800px)` |
+| **`,` (comma)** | Equivalent to `or`; if *any* query is true, the styles apply. | `@media (max-width: 600px), print` |
+
+## 2. Defining Layout Breakpoints (`width`)
+
+The most common use of media queries is to define breakpoints—specific screen widths where the layout needs to change dramatically.
+
+### Mobile-First vs. Desktop-First
+
+You can structure your responsive CSS using two primary approaches based on the `min-width` or `max-width` feature:
+
+#### A. Mobile-First (Recommended)
+
+Start with your default, unqueried CSS styles for the smallest screens (mobile). Then, use `min-width` to layer on changes for progressively larger screens.
+
+ * **Logic:** **If the screen size is *at least* this wide, apply these changes.**
+ * **Advantage:** Forces lean, performant base CSS, prioritizing mobile usability.
+
+```css title="styles.css"
+/* Base styles (Default for ALL, designed for mobile) */
+.container {
+ padding: 10px;
+ display: block; /* Stacks vertically */
+}
+
+/* Tablet and larger (at least 768px wide) */
+@media (min-width: 768px) {
+ .container {
+ padding: 20px;
+ display: grid; /* Switch to grid layout */
+ grid-template-columns: 1fr 1fr;
+ }
+}
+```
+
+
+
+
+#### B. Desktop-First
+
+Start with your default, unqueried CSS for the largest screens (desktop). Then, use `max-width` to apply changes for smaller screens.
+
+ * **Logic:** **If the screen size is *at most* this wide, apply these changes.**
+
+```css title="styles.css"
+/* Base styles (Default for desktop, applies to ALL) */
+.container {
+ display: flex; /* Horizontal layout */
+}
+
+/* Tablet and smaller (maximum 1024px wide) */
+@media (max-width: 1024px) {
+ .container {
+ flex-direction: column; /* Switch to vertical stack */
+ }
+}
+```
+
+## 3. Other Useful Media Features
+
+Media Queries can respond to more than just screen size, allowing you to adapt the design based on device capabilities or user preferences.
+
+### 3.1. `orientation`
+
+Used to check if the device is in portrait (taller than wide) or landscape (wider than tall) mode.
+
+```css title="styles.css"
+/* Styles applied when the device is held sideways */
+@media (orientation: landscape) {
+ .header-menu {
+ max-width: 800px;
+ }
+}
+```
+
+### 3.2. `prefers-color-scheme`
+
+Used to detect if the user has requested a light or dark color scheme from their operating system settings. Essential for implementing a proper Dark Mode.
+
+```css
+/* Styles applied when the user prefers a Dark Mode */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #121212;
+ color: #f0f0f0;
+ }
+}
+```
+
+
+
+
+### 3.3. `prefers-reduced-motion`
+
+Used to respect users who prefer minimal animation or motion due to vestibular disorders or preference.
+
+```css title="styles.css"
+/* If user prefers less motion, remove animations */
+@media (prefers-reduced-motion: reduce) {
+ * {
+ transition: none !important;
+ animation-duration: 0.001ms !important;
+ scroll-behavior: auto !important;
+ }
+}
+```
+
+## Interactive Media Query Demo
+
+To see media queries in action, resize the browser window below. The layout and background color will change based on the screen width.
+
+
\ No newline at end of file
diff --git a/docs/css/responsiveness/responsive-images.mdx b/docs/css/responsiveness/responsive-images.mdx
index e345ed2..7bea62c 100644
--- a/docs/css/responsiveness/responsive-images.mdx
+++ b/docs/css/responsiveness/responsive-images.mdx
@@ -1 +1,126 @@
-
\ No newline at end of file
+---
+title: "Responsive Images (srcset, picture, and CSS)"
+description: "Master the techniques for delivering optimized and appropriately sized images for every device, using CSS max-width, HTML srcset, and the picture element."
+keywords: [responsive images, srcset, sizes, picture element, high-resolution images, art direction, performance, 'max-width 100%', image formats, webp, lazy loading]
+tags: [responsive images, srcset, sizes, picture element, high-resolution images, art direction, performance, 'max-width 100%', image formats, webp, lazy loading]
+sidebar_label: "Responsive Images"
+---
+
+Delivering images efficiently is one of the most critical aspects of web performance and responsive design. A large image optimized for a desktop monitor should not be loaded by a user on a small smartphone screen.
+
+Responsive image techniques allow the browser to choose the **best image source** based on the device's viewport size, resolution (pixel density), and screen orientation.
+
+
+
+
+## 1. The Fundamental CSS Rule
+
+Before diving into advanced HTML attributes, the most important CSS rule for responsive images ensures that they never overflow their container.
+
+```css title="styles.css"
+img {
+ max-width: 100%; /* Ensures the image scales down to fit the container */
+ height: auto; /* Prevents distortion by maintaining the original aspect ratio */
+ display: block; /* Removes extra spacing below the image */
+}
+```
+
+This rule solves the layout problem (images won't break the design) but **not** the performance problem (the browser still loads the largest possible image file).
+
+## 2. Resolution Switching with `srcset` and `sizes`
+
+The `srcset` and `sizes` attributes, added to the standard `` tag, tell the browser about the available image sources and the size the image will occupy on the page. The browser then uses this information to make the best decision for performance and quality.
+
+### 2.1. `srcset`: Defining Available Sources
+
+`srcset` provides a comma-separated list of image URLs and their associated descriptors.
+
+ * **Pixel Density Descriptor (`x`):** For high-resolution (Retina) screens.
+ * **Width Descriptor (`w`):** For different viewport widths.
+
+**Example (Pixel Density):**
+The browser chooses the `2x` image for Retina screens and the default `1x` image for standard screens.
+
+```html title="index.html"
+
+```
+
+
+
+
+### 2.2. `sizes`: Defining Layout Slot Size
+
+`sizes` tells the browser how much space the image will take up in the final layout, based on media query conditions.
+
+**Example (Layout Size):**
+
+ * On viewports wider than 900px, the image takes up 25vw.
+ * Otherwise (default), the image takes up 100vw.
+
+```html title="index.html"
+
+```
+
+The browser combines `srcset` (available images) and `sizes` (layout size) to efficiently select the optimal image file.
+
+## 3. Art Direction with ``
+
+The `` element is used when you need **art direction**, which means changing the actual image (not just the resolution) to fit different layouts or aesthetic needs (e.g., cropping a horizontal image into a vertical image on mobile).
+
+The `` element contains multiple `` elements and one required `` element. The browser uses the first `` element whose `media` condition matches.
+
+### Example (Changing Crop Based on Viewport)
+
+```html title="index.html"
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+## 4. Image Format Switching (`type`)
+
+The `` element is also perfect for providing modern image formats (like WebP) with a reliable fallback (like JPEG) for older browsers. The browser will use the first supported format it encounters.
+
+```html title="index.html"
+
+
+
+
+
+
+
+```
+
+## Interactive Responsive Image Demo
+
+While we cannot load external images in this environment, this demo shows the essential HTML structure and CSS that would enable a fully responsive image setup.
+
+
\ No newline at end of file
diff --git a/docs/css/responsiveness/responsive-typography.mdx b/docs/css/responsiveness/responsive-typography.mdx
index e345ed2..d90f84d 100644
--- a/docs/css/responsiveness/responsive-typography.mdx
+++ b/docs/css/responsiveness/responsive-typography.mdx
@@ -1 +1,130 @@
-
\ No newline at end of file
+---
+title: "Responsive Typography (Scaling Text)"
+description: "Learn modern CSS techniques, including viewport units and fluid typography, to make text dynamically scale and adapt perfectly to any screen size."
+keywords: [responsive typography, fluid typography, CSS text scaling, clamp, viewport units, vw, vh, rem, em]
+tags: [responsive typography, fluid typography, CSS text scaling, clamp, viewport units, vw, vh, rem, em]
+sidebar_label: Responsive Typography
+---
+
+Responsive design isn't just about rearranging layouts; it's also about ensuring text remains readable and visually appealing across all screen sizes. Traditional fixed pixel sizes (`px`) often lead to text that is either too small on large monitors or too large on mobile devices.
+
+**Responsive Typography** (or **Fluid Typography**) uses techniques that allow text size to scale dynamically with the viewport width, often within sensible limits.
+
+
+
+
+## 1. Using Relative Units (`rem` and `em`)
+
+Before making text fluid, you must establish a good foundation using relative units.
+
+ * **`rem` (Root em):** Relative to the font size of the root HTML element. This is the recommended unit for nearly all typography because changing the root size scales the entire typographic system proportionally.
+ * **`em` (Element em):** Relative to the font size of the parent element. This can be useful for minor scaling within a component but can lead to compounding issues (where sizes multiply unexpectedly).
+
+### Best Practice Setup
+
+Set the base size on the `html` element to make user accessibility settings (like browser zoom) work properly, and then use `rem` everywhere else.
+
+```css title="styles.css"
+/* Base size for accessibility. 62.5% makes 1rem = 10px
+ (10px / 16px default = 0.625) */
+html {
+ font-size: 62.5%;
+}
+
+/* Now, 3.6rem = 36px, 1.6rem = 16px, etc. */
+h1 {
+ font-size: 3.6rem;
+}
+
+p {
+ font-size: 1.6rem;
+}
+```
+
+
+
+
+## 2. Fluid Scaling with Viewport Units (`vw`)
+
+The `vw` (Viewport Width) unit is a direct way to achieve fluid typography. `1vw` is equal to $1\%$ of the viewport width.
+
+### Basic `vw` Fluidity
+
+Using `vw` directly causes the text to constantly scale, which is great for large, attention-grabbing titles but bad for body text, as it can become illegibly small on tiny screens or overwhelmingly huge on massive monitors.
+
+```css title="styles.css"
+/* Title scales up and down continuously with the window size */
+.headline {
+ font-size: 6vw;
+}
+```
+
+## 3. The `clamp()` Function (Best Practice)
+
+The `clamp()` CSS function is the modern solution for fluid typography. It allows you to define a size that scales fluidly within a defined minimum and maximum limit, ensuring optimal readability.
+
+### `clamp()` Syntax
+
+```css title="styles.css"
+clamp( MIN_SIZE, FLUID_SIZE, MAX_SIZE )
+```
+
+1. **`MIN_SIZE`:** The smallest the font size will ever be (e.g., `1.8rem`).
+2. **`FLUID_SIZE`:** The size the font will try to be, based on viewport size (e.g., `3vw`).
+3. **`MAX_SIZE`:** The largest the font size will ever be (e.g., `4rem`).
+
+The browser uses the `FLUID_SIZE` as long as it stays between the `MIN_SIZE` and `MAX_SIZE`.
+
+### Example: Fluid Body Text
+
+This ensures the body text is never smaller than 16px (`1.6rem`) and never larger than 20px (`2rem`), while scaling smoothly in between.
+
+```css title="styles.css"
+p {
+ font-size: clamp(1.6rem, 1.5rem + 0.5vw, 2rem);
+}
+```
+
+ * **How the `FLUID_SIZE` Works:** We use a formula like `1.5rem + 0.5vw`.
+ * The `1.5rem` acts as a base size.
+ * The `0.5vw` adds a small percentage of the viewport width, ensuring subtle, smooth scaling.
+
+
+
+
+## 4. Using Media Queries to Adjust Base Size
+
+If you want more control than a single `clamp()` function provides, you can use Media Queries to change the `html` base font size at specific breakpoints. This leverages the power of the `rem` unit.
+
+```css title="styles.css"
+/* Base Mobile Size */
+html {
+ font-size: 62.5%; /* 1rem = 10px */
+}
+
+/* Tablet and Up: Increase base size for better readability */
+@media screen and (min-width: 768px) {
+ html {
+ font-size: 70%; /* 1rem = 11.2px (slightly larger) */
+ }
+}
+
+/* Desktop and Up: Larger base size */
+@media screen and (min-width: 1200px) {
+ html {
+ font-size: 75%; /* 1rem = 12px */
+ }
+}
+
+/* All heading sizes (e.g., 3.6rem) will automatically scale up
+ at the breakpoints without needing individual font-size rules. */
+```
+
+## Interactive Fluid Typography Demo
+
+This demo uses the `clamp()` function on the headline to show how the text size scales dynamically with the viewport width, but stops scaling once it hits its maximum and minimum bounds.
+
+
\ No newline at end of file
diff --git a/docs/css/transitions-and-animations/animation-timing.mdx b/docs/css/transitions-and-animations/animation-timing.mdx
index 52bd74e..9380d0b 100644
--- a/docs/css/transitions-and-animations/animation-timing.mdx
+++ b/docs/css/transitions-and-animations/animation-timing.mdx
@@ -103,5 +103,4 @@ The three boxes below execute the same `translateX(200px)` transition over the s
penId="xbVzrLK"
/>
-
In this demo, hovering over the container triggers the translation of each box. You can see how the different timing functions affect the speed and feel of the movement.
\ No newline at end of file
+```
+
+
` element. The browser uses the first `
+
+