### Fluid Typography with Custom Properties for Calculation

Source: https://github.com/tak-dcxi/acd985cd8b7486a807f1c240731cc7e0/blob/main/css-responsive.md

This CSS example shows how to use custom properties to define and calculate the slope and intercept for the clamp() function, enabling fluid typography based on viewport units. This approach centralizes the calculation logic.

```css
/* カスタムプロパティで slope / intercept を計算する例 */
--_slope: calc(
  (var(--_max-size) - var(--_min-size)) /
  (var(--_max-reference) - var(--_min-reference))
);
--_intercept: calc(
  var(--_min-size) - var(--_slope) * var(--_min-reference)
);

font-size: clamp(
  var(--_min-size) / 16 * 1rem,
  var(--_slope) * 100svi + var(--_intercept) / 16 * 1rem,
  var(--_max-size) / 16 * 1rem
);
```

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

### Fluid Typography Calculation with clamp() and Viewport Units

Source: https://github.com/tak-dcxi/acd985cd8b7486a807f1c240731cc7e0/blob/main/css-responsive.md

This CSS demonstrates fluid typography using the clamp() function. It calculates the font-size dynamically based on viewport width, interpolating between a minimum and maximum size.

```css
font-size: clamp(
  14 / 16 * 1rem,
  0.00455 * 100svi + 12.18 / 16 * 1rem,
  18 / 16 * 1rem
);
```

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

### Correct Usage of var() within Property Values

Source: https://github.com/tak-dcxi/acd985cd8b7486a807f1c240731cc7e0/blob/main/css-responsive.md

This CSS snippet illustrates the correct usage of custom properties (var()) within property values, which is permitted. It sets the display to grid and defines the grid-template-columns using a custom property for the column count.

```css
/* 正しい — プロパティ値の中では var() を使ってよい */
._card {
  --_column-count: 3;
  
  display: grid;
  grid-template-columns: repeat(var(--_column-count), minmax(0, 1fr));
}
```

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

### Correct Usage of Literal Values in Container Query Conditions

Source: https://github.com/tak-dcxi/acd985cd8b7486a807f1c240731cc7e0/blob/main/css-responsive.md

This CSS shows the correct way to define container query conditions by using literal values instead of custom property references within the condition itself. This ensures the query is evaluated correctly.

```css
/* 正しい — クエリ条件はリテラル値で書く */
._card {
  @container --article-cards (inline-size >= calc(160 / 16 * 1rem * 3 + 24 / 16 * 1rem * 2)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
```

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

### Incorrect Usage of var() in Container Query Conditions

Source: https://github.com/tak-dcxi/acd985cd8b7486a807f1c240731cc7e0/blob/main/css-responsive.md

This CSS demonstrates an incorrect approach where a custom property reference (var()) is used directly within a container query condition. This is not allowed as var() is for property value substitution, not for query syntax elements.

```css
/* 禁止 — クエリ条件内で var() を使っている */
:scope {
  --_column-count: 3;
  --_column-min-width: calc(160 / 16 * 1rem);
  --_column-gap: calc(24 / 16 * 1rem);

  container: --article-cards / inline-size;
}

._card {
  @container --article-cards (inline-size >= calc(var(--_column-width) * var(--_column-count) + var(--_column-gap) * (var(--_column-count) - 1))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.