Enhance align-items documentation clarity

Updated the description and clarified the explanation of the `align-items` property in flexbox and grid contexts. Added a section for common `align-items` values in flexbox.

Author: mamtawardhani

content/css/concepts/flexbox/terms/align-items/align-items.md

@@ -1,6 +1,6 @@
 ---
 Title: 'align-items'
-Description: Controls how items are aligned within a container
+Description: 'Sets how items are aligned along the cross axis in flex containers and the block axis in grid containers.'
 Subjects:
   - 'Web Design'
   - 'Web Development'
@@ -13,7 +13,7 @@ CatalogContent:
   - 'paths/front-end-engineer-career-path'
 ---
 
-**`align-items`** is a flexbox and grid property that specifies how items inside a container are aligned. In flexbox, align-items controls how these items are aligned across the cross-axis (the axis perpendicular to the main axis), which is specified by flex-direction. In a grid, it controls the alignment in the block direction (vertical by default)..
+**`align-items`** sets how items are aligned inside a flex or grid container. In flexbox, it controls alignment along the cross-axis (perpendicular to the main axis defined by `flex-direction`). In grid, it controls alignment along the block axis within each grid area (vertical by default in horizontal writing modes).
 
 ## Syntax
 
@@ -24,7 +24,7 @@ align-items: <value>;
 **Parameters:**
 
 - `<value>`: Specifies how items inside a container are aligned. Common values include:
-  - `stretch (default)`
+  - `stretch` (default)
   - `flex-start`
   - `flex-end`
   - `center`
@@ -34,11 +34,11 @@ align-items: <value>;
 
 **Return value:**
 
-- None. This property sets a layout rule and does not return a value.
+None. This property sets a layout rule and does not return a value.
 
 ## Example 1: Using `align-items` with flex
 
-In this example, `align-items: center` is applied to a flex container to align its child elements vertically centered along the cross-axis.
+In this example, `align-items: center` is applied to a flex container to align its child elements vertically centered along the cross-axis:
 
 ```css
 .container {
@@ -72,6 +72,8 @@ The output of the code above is shown below:
 
 ![align-items implementation using grid where the paragraphs inside 'div' are positioned at the end](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-align-items-2.jpg)
 
-The image below shows some of the align-items property values in flexbox and their corresponding alignment.
+## Common `align-items` Values in Flexbox
+
+The image below illustrates how different align-items values affect vertical alignment in a flex container:
 
 ![align-items property values in flexbox and their corresponding alignment](https://raw.githubusercontent.com/Codecademy/docs/main/media/css-align-items-illustration.jpg)