### Standard Width Utility Example

Source: https://docs.automaticcss.com/dimension/width-utilities

This example demonstrates how a standard width utility like `.width--20` is compiled. It sets the inline size to 100% and the max inline size to a fraction of the content width, ensuring responsiveness.

```css
inline-size: 100%;
max-inline-size: calc(var(--content-width) * 0.2);

```

--------------------------------

### Card Container Recipe Example

Source: https://docs.automaticcss.com/recipes/card-container-recipe

This example demonstrates how to use the Card Container recipe to apply styles when the container is at least 767px wide. It changes the grid layout, media aspect ratio, and heading size.

```css
%root% {
  @container card ( inline-size >= 767px ) {
    display: grid;
    grid-template-columns: var(--grid-2-3);
    --card-media-aspect-ratio: 4/3;
    --card-heading-size: var(--h2);
  }
}

```

--------------------------------

### Get WP-CLI Help for Automatic.css

Source: https://docs.automaticcss.com/cli

Use WP-CLI's built-in help system to explore available commands and subcommands for Automatic.css. This is useful for understanding command syntax, options, and usage examples.

```bash
wp help acss
wp help acss settings
wp help acss settings set
```

--------------------------------

### Get Automatic.css Status in JSON or YAML Format

Source: https://docs.automaticcss.com/cli/status

Outputs the Automatic.css installation status in a machine-readable format, suitable for scripting. Choose between JSON or YAML output.

```bash
wp acss status --format=json
```

```bash
wp acss status --format=yaml
```

--------------------------------

### Show Automatic.css Installation Status

Source: https://docs.automaticcss.com/cli/status

Displays a human-readable summary of the Automatic.css installation, including plugin information, active integrations, CSS file status, settings count, and feature flags.

```bash
wp acss status
```

--------------------------------

### Basic Flex Grid Setup

Source: https://docs.automaticcss.com/flexbox/flex-grids

Apply the `?flex-grid` recipe to a parent container to enable flexbox grid behavior. Unbalanced items will be centered at the bottom by default.

```css
.my-grid {
  ?flex-grid;
}
```

--------------------------------

### Customizing Scale for Grow/Shrink Effects

Source: https://docs.automaticcss.com/effects/entrance-effects

Adjust the starting scale for grow and shrink entrance effects using `--enter-scale-start` (for grow) and `--enter-scale-shrink` (for shrink).

```css
.my-element {
  --enter-scale-start: 0.8; /* Start at 80% for grow */
  --enter-scale-shrink: 1.2; /* Start at 120% for shrink */
}
```

--------------------------------

### Customizing Starting Opacity for Fade Effect

Source: https://docs.automaticcss.com/effects/entrance-effects

Adjust the initial opacity for the fade entrance effect by setting the `--enter-opacity-start` CSS variable. This allows the element to start partially transparent instead of fully transparent.

```css
.my-element {
  --enter-opacity-start: 0.2; /* Start at 20% opacity instead of fully transparent */
}
```

--------------------------------

### Small Outline Button Example

Source: https://docs.automaticcss.com/buttons/button-classes

Combine multiple classes to create a small, outline button using the primary color. The order of classes does not matter.

```html
<a href="#" class="btn--primary btn--outline btn--s">Small Primary Outline Button</a>
```

--------------------------------

### Create 5-Column Masonry Layout

Source: https://docs.automaticcss.com/grids/masonry-layouts

Use the `.masonry--[columns]` utility to define the number of columns for your masonry layout. This example shows how to create a 5-column layout.

```html
<div class="masonry--5">...</div>
```

--------------------------------

### Get All or Specific Settings via CLI

Source: https://docs.automaticcss.com/cli/settings

Retrieve all settings as JSON, or a specific setting's raw value. Use `--format` to specify output as JSON, YAML, or var_export.

```bash
wp acss settings get [<key>] [--format=<format>]
```

```bash
# Get all settings as JSON  
wp acss settings get  
```

```bash
# Get a specific setting (prints the raw value)  
wp acss settings get color-primary  
# #3366cc  
```

```bash
# Get all settings as YAML  
wp acss settings get --format=yaml  
```

--------------------------------

### Combine Entrance and Exit Effects

Source: https://docs.automaticcss.com/effects/exit-effects

Elements can be configured with both entrance and exit effects simultaneously. This example applies fade and float on entrance, and fade and sink on exit.

```html
<section class="on-enter--fade on-enter--float on-exit--fade on-exit--sink">
  Fades and floats in on entrance, fades and sinks on exit
</section>

```

--------------------------------

### Customize Starting Opacity for Fade Effect

Source: https://docs.automaticcss.com/effects/visible-effects

Set the initial opacity for elements using the fade effect. This allows the element to start partially visible rather than fully transparent.

```css
.my-element {
  --visible-opacity-start: 0.2; /* Start at 20% opacity instead of fully transparent */
}

```

--------------------------------

### Manually Responsive Masonry Layout

Source: https://docs.automaticcss.com/grids/masonry-layouts

Control masonry layout responsiveness manually using breakpoint classes. This example sets a 3-column layout on small screens and a 4-column layout on medium screens and up.

```html
<div class="masonry--sm-3 masonry--md-4">...</div>
```

--------------------------------

### Customize Scale for Grow and Shrink Effects

Source: https://docs.automaticcss.com/effects/visible-effects

Configure the starting scale for grow effects and the ending scale for shrink effects. This controls the size change during the animation.

```css
.my-element {
  --visible-scale-start: 0.8; /* Grow: start at 80% */
  --visible-scale-shrink: 1.2; /* Shrink: start at 120% */
}

```

--------------------------------

### Smart Spacing Applied Correctly

Source: https://docs.automaticcss.com/spacing/smart-spacing

This example shows a structure where Smart Spacing is applied correctly because the heading and paragraph are direct children of the targeted div.

```html
<div class="brxe-text">  
    <h2>Heading</h2>  
    <p>This is a paragraph.</p>  
</div>  

```

--------------------------------

### Apply --ease-snappy to Dropdown Transitions

Source: https://docs.automaticcss.com/effects/easing-presets

Utilize the --ease-snappy preset for responsive and dynamic UI elements like dropdowns. It provides a fast start with a gentle stop.

```css
.dropdown {
  transition: opacity 0.3s var(--ease-snappy),
              transform 0.3s var(--ease-snappy);
}
```

--------------------------------

### HTML Structure for Gradient Overlay

Source: https://docs.automaticcss.com/overlays/custom-overlays

Use the generated custom overlay class with your HTML content. This example shows a gradient overlay applied to a hero section.

```html
<div class="overlay-dark-gradient">
  <img src="hero.jpg" alt="Hero">
  <div class="hero__content">
    <h1>Title appears above gradient</h1>
  </div>
</div>
```

--------------------------------

### Parallax Effect Setup

Source: https://docs.automaticcss.com/effects/entrance-effects

Implement a parallax effect by applying the `.on-enter--parallax` class and setting the `--enter-parallax-distance`. Ensure the parent container has `overflow: hidden` to clip the movement.

```html
<div class="image-container">
  <img src="background.jpg" class="on-enter--parallax" alt="Parallax background">
</div>
```

```css
.image-container {
  overflow: hidden;
}

.on-enter--parallax {
  --enter-parallax-distance: 200px; /* Total travel distance */
}
```

--------------------------------

### Dynamic Opacity on Hover

Source: https://docs.automaticcss.com/overlays/custom-overlays

Control overlay opacity dynamically on hover using CSS transitions. This example applies a transition to the `--overlay-opacity` custom property.

```css
.card {
  --overlay-opacity: 0.7;
  transition: --overlay-opacity 0.3s ease;
}

.card:hover {
  --overlay-opacity: 0.3;
}
```

--------------------------------

### Amplify Spacing with Calc()

Source: https://docs.automaticcss.com/spacing/spacing-variables

Use `calc()` with multiplication to amplify a spacing variable's value. This example demonstrates an adjustment that logically matches a larger predefined spacing variable.

```css
.testimonial-card {
    padding: calc(var(--space-m) * 1.5);
}
```

--------------------------------

### Composing Multiple On Visible Effects

Source: https://docs.automaticcss.com/effects/visible-effects

Combine multiple `.on-visible--*` classes on a single element to achieve composite animations. This example fades in, floats up, and grows simultaneously.

```html
<div class="on-visible--fade on-visible--float on-visible--grow">
  Fades in, floats up, and grows simultaneously
</div>
```

--------------------------------

### Configure Responsive Grid Columns

Source: https://docs.automaticcss.com/grids/grid-classes-standard

Control grid column structure across different responsive breakpoints by combining grid classes with breakpoint-specific modifiers. This example sets a 4-column grid on desktop, 2 columns at 'L', and 1 column at 'M'.

```html
<div class="grid--4 grid--l-2 grid--m-1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
```

--------------------------------

### Create Double Grid Gap with Calc()

Source: https://docs.automaticcss.com/grids/grid-classes-standard

To create variations in grid gap, use `calc()` functions with the `--grid-gap` variable. This example doubles the standard grid gap.

```html
<div class="grid calc(var(--grid-gap) * 2)">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
```

--------------------------------

### Masonry Layout with Row and Column Gaps

Source: https://docs.automaticcss.com/grids/masonry-layouts

Control both row and column gaps separately for masonry layouts. This example uses a 1rem column gap and a 0.5rem row gap for a 3-column masonry layout.

```html
<div class="masonry--3 column-gap--1 row-gap--0.5">...</div>
```

--------------------------------

### Customize Exit Animation Range

Source: https://docs.automaticcss.com/effects/exit-effects

Control when an exit animation starts and ends using CSS variables. This example sets an earlier start and end for the animation.

```css
.early-exit {
  --exit-range-start: cover 20%;
  --exit-range-end: cover 60%;
}

```

--------------------------------

### List Settings with Filtering via CLI

Source: https://docs.automaticcss.com/cli/settings

List all settings, optionally filtering by a search pattern. The default format is a table, but JSON, CSV, YAML, or count are also available.

```bash
wp acss settings list [--search=<pattern>] [--format=<format>]  
```

```bash
# All settings in a table  
wp acss settings list  
```

```bash
# All color-related settings  
wp acss settings list --search=color  
```

```bash
# Just the count  
wp acss settings list --format=count  
```

--------------------------------

### Use Viewport-Relative Exit Range

Source: https://docs.automaticcss.com/effects/exit-effects

Utilize the `exit` keyword with CSS variables to define animation ranges relative to the viewport. This example starts the animation when the element begins leaving the viewport and completes it at 80% exit.

```css
.viewport-exit {
  --exit-range-start: exit 0%;
  --exit-range-end: exit 80%;
}

```

--------------------------------

### Use Custom Overlay Classes

Source: https://docs.automaticcss.com/overlays/custom-overlays

Apply custom overlays using generated utility classes. Use numbered classes like `.overlay-1` or custom-named classes if configured.

```html
<div class="overlay-1">
  <h2>Content above overlay</h2>
</div>

<!-- By custom name (if configured) -->
<div class="overlay-gradient">
  <h2>Content above overlay</h2>
</div>
```

--------------------------------

### Apply Column Styling with ?columns Recipe

Source: https://docs.automaticcss.com/columns/css-columns

Use the `?columns` recipe to apply column styling. Customize the number of columns, minimum column width, and gaps using local variables.

```css
.my-columns {
  --col-count: 3;
  --col-gap: 20px;
  --row-gap: 20px;
}

```

--------------------------------

### Card Framework Solution Using Design Tokens

Source: https://docs.automaticcss.com/cards/card-framework-philosophy

Demonstrates how the Card Framework centralizes styles using CSS variables (design tokens) for consistent card appearance.

```css
.service-card {
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    gap: var(--card-gap);
}

.team-card {
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    gap: var(--card-gap);
}
```

--------------------------------

### Basic Overlay CSS Implementation

Source: https://docs.automaticcss.com/overlays/overlay-classes

This CSS demonstrates how basic overlays are implemented using a pseudo-element (`::before`), `position: absolute`, and `isolation: isolate` for stacking context.

```css
.overlay {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.overlay::before {
  content: "";
  background: var(--overlay-color, rgba(0, 0, 0, 0.7));
  position: absolute;
  inset: 0;
  z-index: var(--overlay-z-index, -1);
}
```

--------------------------------

### SCSS Center Mixin Default Usage

Source: https://docs.automaticcss.com/mixins/center-mixin

Example of using the center() mixin with default arguments to center elements on both axes.

```scss
.my-centered-box {
  @include center;
}

```

--------------------------------

### Import Settings from JSON via CLI

Source: https://docs.automaticcss.com/cli/settings

Import settings from a JSON file, replacing the current configuration. Use `--force` to skip validation, `--skip-css` to avoid regeneration, and `--yes` for non-interactive use.

```bash
wp acss settings import <file> [--force] [--skip-css] [--yes]  
```

```bash
# Interactive import (asks for confirmation)  
wp acss settings import /tmp/acss-settings.json  
```

```bash
# Non-interactive, skip CSS regeneration (for CI)  
wp acss settings import ./config/acss-settings.json --yes --skip-css  
```

--------------------------------

### Basic Fade-In Effect

Source: https://docs.automaticcss.com/effects/visible-effects

Apply the `.on-visible--fade` class to an element to make it fade in when it enters the viewport. This is a basic usage example.

```html
<div class="on-visible--fade">
  This element fades in when it becomes visible
</div>
```

--------------------------------

### SCSS Center Mixin Vertical Center, Left Align

Source: https://docs.automaticcss.com/mixins/center-mixin

Example of using the center() mixin to vertically center content while aligning it to the left.

```scss
.my-centered-box {
  @include center(left);
}

```

--------------------------------

### Use Recipe for Color Expansion

Source: https://docs.automaticcss.com/recipes

Shows how to use a Recipe to access and modify color variables, simplifying custom color creation and transparency adjustments.

```css
?primary-clr;
```

--------------------------------

### Deploy Content Grid Recipe

Source: https://docs.automaticcss.com/recipes/content-grid-recipe

This snippet shows how to apply the content grid recipe directly to a CSS box. It automatically outputs the root selector for immediate use.

```css
?content-grid;

```

--------------------------------

### Get the value of a single flag

Source: https://docs.automaticcss.com/cli/flags

Prints the current value of a single flag, matching names case-insensitively. Exits with an error if the flag is not declared in `flags.json`.

```bash
wp acss flags get <flag>
```

```bash
$ wp acss flags get EXAMPLE_FLAG
```

--------------------------------

### Set Base Heading Size

Source: https://docs.automaticcss.com/typography/fluid-headings

Configure the base font size for all headings. This sets the default H4 size on desktop and the starting point for the typography scale.

```css
.acss-base-heading-settings {
  /* Input for base heading size */
}
```

--------------------------------

### Apply flag changes

Source: https://docs.automaticcss.com/cli/flags

Demonstrates the sequence of commands to apply flag changes, which may involve setting a flag and then regenerating CSS.

```bash
wp acss flags set EXAMPLE_FLAG on
wp acss css regenerate
```

--------------------------------

### Export Settings to JSON via CLI

Source: https://docs.automaticcss.com/cli/settings

Export all current settings as pretty-printed JSON. The output can be directed to stdout or a specified file using the `--file` option.

```bash
wp acss settings export [--file=<path>]  
```

```bash
# Print to stdout (pipe-friendly)  
wp acss settings export > acss-settings.json  
```

```bash
# Write directly to a file  
wp acss settings export --file=/tmp/acss-settings.json  
```

--------------------------------

### Use Descriptive Overlay Classes

Source: https://docs.automaticcss.com/overlays/overlay-classes

Utilize classes following the `overlay--` pattern for specific overlay types. This allows for semantic naming and potentially different default styles.

```html
<div class="overlay--dark">
  <!-- Content -->
</div>
```

--------------------------------

### Combine Multiple Exit Effects

Source: https://docs.automaticcss.com/effects/exit-effects

Combine multiple exit effect classes on a single element to create a composite animation. This example fades and shrinks the element.

```html
<div class="on-exit--fade on-exit--shrink">
  Fades out and shrinks as you scroll past
</div>

```

--------------------------------

### Expand Recipe in ACSS

Source: https://docs.automaticcss.com/recipes

Demonstrates how to call a Recipe in ACSS by typing '?' followed by the recipe name and closing with ';'.

```css
?columns;
```

--------------------------------

### Apply Variable Grid with Utility Class

Source: https://docs.automaticcss.com/grids/variable-grid

Assign the `.variable-grid` class to any element to create a responsive two-column layout. For more than two columns or specific width sensitivity, use the `--min` utility.

```html
<div class="variable-grid">
  <!-- Content -->
</div>

```

--------------------------------

### Customize Exit Blur Amount

Source: https://docs.automaticcss.com/effects/exit-effects

Increase or decrease the blur intensity for the blur exit effect by setting the `--exit-blur-amount` variable. This example applies a 12px blur.

```css
.my-element {
  --exit-blur-amount: 12px; /* More blur */
}

```

--------------------------------

### Apply Transition with Granular Variables

Source: https://docs.automaticcss.com/effects/transition

Use individual transition variables for duration, timing, and delay when more control is needed.

```css
.my-card {
    transition: background var(--transition-duration) var(--transition-timing) var(--transition-delay);
}

```

--------------------------------

### Combine Easing Presets with CSS Animations

Source: https://docs.automaticcss.com/effects/easing-presets

Integrate easing presets into CSS animations for effects like slide-in. This example uses --ease-snappy for a slide-in animation.

```css
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slide-in 0.5s var(--ease-snappy) forwards;
}
```

--------------------------------

### Apply Custom Auto Grid with Recipe

Source: https://docs.automaticcss.com/grids/auto-grids

Apply a predefined Auto Grid configuration using the `@auto-grid` recipe. This is a simpler way to implement Auto Grids when default settings are sufficient.

```scss
@auto-grid;
```

--------------------------------

### Staggered Content Reveal with On Visible

Source: https://docs.automaticcss.com/effects/visible-effects

Apply these classes to a container to create a staggered reveal effect for its children. Each child automatically gets an increasing delay based on its position.

```html
<div class="grid on-visible-all--fade on-visible-all--float on-visible--stagger">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>
```

--------------------------------

### Basic Auto Grid Usage

Source: https://docs.automaticcss.com/grids/auto-grid-mixin

Use the auto-grid mixin with only the required $column-count argument to create a basic responsive grid.

```scss
.my-grid {
    @include auto-grid(4);
}

```

--------------------------------

### Apply Icon Sizes with Utility Classes

Source: https://docs.automaticcss.com/icons/icon-framework

Use the `.icon--{size}` class to change the size of individual icons or groups of icons. Available sizes include 's', 'm', and 'l'.

```html
<i class="icon icon--l"></i>
```

--------------------------------

### Run Automatic.css Doctor Command

Source: https://docs.automaticcss.com/cli/doctor

Executes the Automatic.css doctor command to perform diagnostic health checks. This command inspects various aspects of the Automatic.css installation and reports their status.

```bash
wp acss doctor [--format=<format>] [--fix]
```

--------------------------------

### Create a Responsive Masonry Layout

Source: https://docs.automaticcss.com/columns/masonry-layouts

For responsive masonry, set `--col-min-width` instead of `--col-count`. The browser will render as many columns as possible while respecting the minimum width. Columns stack automatically when the minimum width cannot be met.

```css
.my-masonry {
  --col-min-width: 300px;
  --col-gap: var(--space-l);
  --row-gap: var(--space-l);
}

```

--------------------------------

### Fluid Text Override Example

Source: https://docs.automaticcss.com/typography/fluid-text

Use this snippet to manually override a specific text size. Input min and max values to control the fluid range, ensuring responsiveness.

```css
.feature-description {
  font-size: var(--text-xl-to-s);
}
```

--------------------------------

### Highlighted Quote Blockquote Style

Source: https://docs.automaticcss.com/elements/blockquotes

Apply custom styles to a blockquote for a highlighted quote effect using CSS variables. This example sets background, border, radius, and shadow.

```css
.highlight-quote {
  --blockquote-background: var(--accent-ultra-light);
  --blockquote-border-color: var(--accent);
  --blockquote-border-width: 2px;
  --blockquote-border-radius: var(--radius-l);
  --blockquote-box-shadow: var(--box-shadow-1);
  --blockquote-max-inline-size: 60ch;
}

```

--------------------------------

### Automatically Responsive Masonry Layout

Source: https://docs.automaticcss.com/grids/masonry-layouts

Combine masonry utilities with `.col-width--[size]` to create automatically responsive masonry layouts. The number of columns will adjust based on the available width and defined column widths.

```html
<div class="masonry--3 col-width--1-2">...</div>
```

--------------------------------

### Apply Basic Exit Effects

Source: https://docs.automaticcss.com/effects/exit-effects

Apply one or more exit effect classes to an element to animate it out of view as the user scrolls past. This example combines fade and float effects.

```html
<section class="hero on-exit--fade on-exit--float">
  This hero section fades and floats away as you scroll past
</section>

```

--------------------------------

### Create a Fixed Column Masonry Layout

Source: https://docs.automaticcss.com/columns/masonry-layouts

Apply the `?columns` recipe to a container and set `--col-count` for a fixed number of columns. Ensure gaps are defined using `--col-gap` and `--row-gap`.

```css
.my-masonry {
  --col-count: 3;
  --col-gap: var(--space-l);
  --row-gap: var(--space-l);
}

```

--------------------------------

### Customize Local Border Width

Source: https://docs.automaticcss.com/borders-dividers/global-border-system

Override specific border properties like width locally while retaining global style and color. This example sets a custom border width.

```css
.card {
    --border-width: 5px;
    border: var(--border-width) var(--border-style) var(--border-color-dark);
}
```

--------------------------------

### Assign Elements to Grid Zones

Source: https://docs.automaticcss.com/recipes/content-grid-recipe

This example demonstrates assigning specific elements (figures, pictures, images) to the 'feature' zone within a content grid layout using the `grid-column` property.

```css
.my-awesome-grid > :is(figure, picture, img) {
    grid-column: feature;
}

```

--------------------------------

### Mobile First Media Query Mixin

Source: https://docs.automaticcss.com/mixins/breakpoint-mixins

Use the `breakpoint-up` mixin for mobile-first min-width media queries. Replace 'extension' with your desired breakpoint name (e.g., xl, l, m, s).

```scss
@include breakpoint-up(extension) {
  // Your CSS goes here.
}
```

--------------------------------

### Masonry Layout with Column Gap

Source: https://docs.automaticcss.com/grids/masonry-layouts

Apply column gaps to masonry layouts using ACSS gap utilities. This example sets a 1rem column gap for a 3-column masonry layout.

```html
<div class="masonry--3 column-gap--1">...</div>
```

--------------------------------

### Import Automatic.css Settings Non-Interactively

Source: https://docs.automaticcss.com/cli

Import Automatic.css settings from a JSON file without user interaction, suitable for CI environments. The `--yes` flag confirms prompts, and `--skip-css` prevents CSS regeneration during import.

```bash
wp acss settings import ./config/acss-settings.json --yes --skip-css
```

--------------------------------

### Force Light Scheme with .scheme--light

Source: https://docs.automaticcss.com/color-scheme/modern-color-scheme-workflow

Apply the `.scheme--light` utility class to a subtree to force `color-scheme: light` for that section. This is useful for elements like cards that need to maintain a specific appearance regardless of the page's overall scheme.

```html
.scheme--light {
  color-scheme: light;
}

```

--------------------------------

### Sticky Header with Content Exit Effect

Source: https://docs.automaticcss.com/effects/exit-effects

Combine sticky positioning with exit effects for content that animates out as the header becomes sticky. This example fades and shrinks the content as the header sticks.

```html
<header class="header--sticky">
  <div class="on-exit--fade on-exit--shrink">
    Content that fades as header becomes sticky
  </div>
</header>

```

--------------------------------

### Apply --ease-elastic to Modal Transitions

Source: https://docs.automaticcss.com/effects/easing-presets

Use the --ease-elastic preset for attention-grabbing entrances, such as modal pop-ins. This creates a spring-like effect with a natural bounce-back.

```css
.modal {
  transition: transform 0.5s var(--ease-elastic);
}
```

--------------------------------

### Combine Easing Presets with CSS Transitions

Source: https://docs.automaticcss.com/effects/easing-presets

Apply easing presets to CSS transitions for properties like box-shadow and transform. This example uses --ease-smooth for card hover effects.

```css
.card {
  transition: box-shadow 0.3s var(--ease-smooth),
              transform 0.3s var(--ease-smooth);
}

.card:hover {
  box-shadow: var(--box-shadow-2);
  transform: translateY(-4px);
}
```

--------------------------------

### Apply Auto Grid Utility Classes

Source: https://docs.automaticcss.com/grids/auto-grids

Utilize predefined utility classes to quickly apply Auto Grids with varying column counts. These classes range from 2 to 12 columns and include ratio grid options.

```html
.grid--auto-2
.grid--auto-3
.grid--auto-4
.grid--auto-5
.grid--auto-6
.grid--auto-7
.grid--auto-8
.grid--auto-9
.grid--auto-10
.grid--auto-11
.grid--auto-12
.grid--auto-1-2
.grid--auto-2-1
.grid--auto-2-3
.grid--auto-3-2
.grid--auto-1-3
.grid--auto-3-1
```

--------------------------------

### SCSS Center Mixin with Breakpoint Manipulation

Source: https://docs.automaticcss.com/mixins/center-mixin

Demonstrates setting initial centering and then modifying it at a specific breakpoint (l) using the center() mixin with 'tokens' output for efficiency.

```scss
.my-centered-box {
  @include center;
  @include breakpoint(l) {
    @include center(left, tokens);
  }
}

```

--------------------------------

### Apply `?list-none` Recipe

Source: https://docs.automaticcss.com/recipes/list-recipes

Use the `?list-none` recipe to remove default list styling. This is useful when you need to apply the reset to a custom class rather than a predefined utility class.

```css
?list-none;
```

--------------------------------

### Apply Clip Path to Overlap Pseudo-element

Source: https://docs.automaticcss.com/recipes/overlap-recipes

Use the clip-path property on the ::before pseudo-element to create angled or custom divider overlap effects. The example uses a polygon to create an angled divider.

```css
%root% + *::before {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}
```