@d-zero/scaffold 5.0.0 → 5.1.1-alpha.0

package/.claude/commands/debug-diff.md

@@ -0,0 +1,95 @@
+---
+description: 2つのページを比較してデバッグする
+disable-model-invocation: true
+argument-hint: [相談内容・比較対象URL等]
+---
+
+# ページ比較デバッグコマンド
+
+`$ARGUMENTS` の内容に応じて、2つの環境のページを比較し差分を特定する。
+
+## 比較対象の例
+
+- 本番サイト vs ステージングサイト
+- 本番サイト vs テストサイト（デモサイト）
+- テストサイト vs ローカルサイト（`http://localhost:8000/`）
+- リリース前後の差分確認
+
+## 判断フロー
+
+`$ARGUMENTS` の相談内容から、適切な比較手法を選択する。
+
+### ビジュアル差分が必要な場合
+
+見た目の崩れ・レイアウトずれ・画像の違いなど。
+
+`@d-zero/archaeologist` を使用する:
+
+```bash
+# 2つのURLを直接比較
+npx @d-zero/archaeologist <URL_A> <URL_B>
+
+# 画像差分のみ
+npx @d-zero/archaeologist <URL_A> <URL_B> -t image
+
+# DOM差分のみ
+npx @d-zero/archaeologist <URL_A> <URL_B> -t dom
+
+# 生HTMLソース差分のみ（ブラウザ不要、高速）
+npx @d-zero/archaeologist <URL_A> <URL_B> -t code
+
+# 特定要素に絞る
+npx @d-zero/archaeologist <URL_A> <URL_B> -s ".c-header"
+
+# 合成画像で左右比較
+npx @d-zero/archaeologist <URL_A> <URL_B> --combined
+
+# デバイスを指定
+npx @d-zero/archaeologist <URL_A> <URL_B> -d desktop,tablet,mobile
+```
+
+結果は `.archaeologist/` ディレクトリに出力される。出力された画像を `Read` で確認する。
+
+### 文字列差分だけで済む場合
+
+テキストの違い・HTMLソースの差異・メタ情報の違いなど。
+
+`@d-zero/archaeologist` の `-t code` で生HTMLソース差分を取得するか、DevTools MCPで両ページのHTMLを取得して比較する。
+
+### ファイル一致確認が必要な場合
+
+CSS・JS・画像などのアセットが同一かどうかの確認。
+
+`@d-zero/filematch` を使用する:
+
+```bash
+# 2つのファイル/URLを比較（一致/不一致の判定）
+npx @d-zero/filematch <URL_OR_PATH_A> <URL_OR_PATH_B>
+```
+
+差分の中身が必要な場合は、両方を `WebFetch` や `curl` で取得して内容を比較する。
+
+### ブラウザで詳細調査が必要な場合
+
+算出スタイルの確認・JS実行結果の違い・動的コンテンツの差異など。
+
+chrome-devtools MCPを使用して両ページを調査する:
+
+1. `navigate_page` で一方のページを開く
+2. `take_screenshot` / `take_snapshot` で状態を記録
+3. `evaluate_script` で算出スタイルやDOM状態を取得
+4. もう一方のページで同じ操作を行い、結果を比較
+
+**注意**: ローカルサイト（`localhost:8000`）を比較対象にする場合、dev serverが起動していなければバックグラウンドで `yarn dev` を起動する。
+
+## CSS・JSの差分深掘り
+
+ページの差分原因がCSS・JSにある可能性がある場合:
+
+1. 両ページが参照しているCSS・JSのURLを `evaluate_script` や HTMLソースから特定する
+2. `@d-zero/filematch` でファイルが同一か確認する
+3. 不一致の場合、両方を取得して差分を確認する
+
+## 複数ページの一括比較
+
+比較対象が複数ページにわたる場合、AskUserQuestionツールでURLリストの提供を求め、`@d-zero/archaeologist` の `-f` オプションを使用する。

package/.claude/commands/fix-component.md

@@ -0,0 +1,134 @@
+---
+description: コンポーネントのコーディング修正
+disable-model-invocation: true
+argument-hint: [component-or-class] [fix-instructions...]
+---
+
+# コンポーネント修正コマンド
+
+`$ARGUMENTS` を解析し、該当するソースファイルを特定してコーディング修正を行う。
+
+## 実行フロー
+
+### 1. 引数の解析
+
+`$ARGUMENTS` から以下を識別する：
+
+- **コンポーネント名**: `c-button`, `c-local-nav` など
+- **クラス名**: `.c-button__label`, `.l-header__nav` など
+- **Figma URL**: `figma.com` を含むURL
+- **修正指示**: 上記以外のテキスト（具体的なCSS値の変更指示など）
+- **対象ページURL/パス**: localhost またはパスの指定
+
+### 2. dev serverの起動
+
+1. chrome-devtools MCPで `navigate_page` を試行し、`http://localhost:8000/` にアクセスできるか確認
+2. 接続拒否（`ERR_CONNECTION_REFUSED`）の場合、**バックグラウンドで** `yarn dev` を起動:
+
+```bash
+# run_in_background: true で実行
+yarn dev
+```
+
+3. 起動後、再度 `navigate_page` で接続確認してから次のステップへ
+
+### 3. 対象ファイルの特定
+
+#### コンポーネント名・クラス名から特定
+
+1. まず `Grep` で `__assets/_libs` 配下を検索:
+
+   ```
+   Grep: pattern="{コンポーネント名}", path="__assets/_libs"
+   ```
+
+   - コンポーネントは **ディレクトリ**（`component/c-button/c-button.css`）の場合と **フラットファイル**（`component/c-local-nav.css`）の場合がある
+   - `.css` と `.pug` の両方を読み込む
+
+2. クラス名が渡された場合:
+   - BEM命名規則からブロック名を抽出（`c-button__label` → `c-button`）
+   - 上記と同じく検索
+   - コンポーネント配下に見つからない場合は `__assets/_libs/style/` 配下も検索
+
+3. 該当コンポーネントが使われているページを `Grep` でビルド済み `htdocs/` から検索し、確認用ページを特定
+
+#### Figma URL
+
+Figma URLはデザインの参照情報として受け取る。**ブラウザで開いたりはしない。**
+ユーザーが提供するデザイン指示・具体的なCSS値をもとに修正内容を判断する。
+
+### 4. 現状把握（DevTools MCP — localhost:8000 専用）
+
+**DevTools MCPは `http://localhost:8000/` のローカルサーバーに対してのみ使用する。外部URLには使用しない。**
+
+1. 特定したCSS/Pugファイルを `Read` で読み込み、現状のスタイルを把握
+2. chrome-devtools MCPで確認用ページを開く:
+   - `navigate_page` で `http://localhost:8000/{対象ページパス}` を開く
+   - `take_screenshot` で現状のスクリーンショットを取得
+3. 対象コンポーネントの詳細確認が必要な場合:
+   - `take_snapshot` でDOM構造とUID一覧を取得
+   - `take_screenshot` に `uid` を指定して対象コンポーネント部分だけのスクリーンショットを取得
+   - `evaluate_script` で算出スタイル（computedStyle）を取得して現在の値を正確に把握:
+     ```javascript
+     () => {
+     	const el = document.querySelector('.target-selector');
+     	const s = window.getComputedStyle(el);
+     	return {
+     		minBlockSize: s.minBlockSize || s.minHeight,
+     		paddingInline: s.paddingInline || `${s.paddingLeft} ${s.paddingRight}`,
+     		gap: s.gap,
+     		// 確認したいプロパティを必要に応じて追加
+     	};
+     };
+     ```
+
+### 5. 修正の実施
+
+1. ユーザーのデザイン指示と現状の差分を分析し、変更箇所を整理してから着手
+2. 修正対象のファイルを編集:
+   - **CSS**: `__assets/_libs/component/` 配下、または `__assets/_libs/style/` 配下
+   - **Pug**: `__assets/_libs/component/` 配下
+   - **HTML**: `__assets/htdocs/` 配下（BurgerEditorブロック構造を壊さないよう注意）
+3. 複数の修正指示がある場合は、一括で編集してからビルド・確認にまとめて進む
+
+### 6. ビルド・確認
+
+1. 修正したソースファイルをビルド:
+
+   ```bash
+   yarn build:only "__assets/htdocs/css/style.css"
+   ```
+
+   - `build:only` に渡すパスは `__assets/htdocs/` 配下のファイル（エントリポイント）。コンポーネントのCSS（`__assets/_libs/component/`）を直接指定するのではなく、それを読み込んでいる `__assets/htdocs/css/style.css` 等を指定する
+   - 末尾のエラー（`process.stdin.setRawMode is not a function`）は表示系の問題で無害。`Done!` が出ていればビルド成功
+
+2. chrome-devtools MCPで確認:
+   - `navigate_page` で `type: "reload"`, `ignoreCache: true` でリロード
+   - **注意**: リロード後は以前のUIDが無効になるので、`take_snapshot` でUID一覧を再取得してから `take_screenshot(uid)` を使う
+   - `evaluate_script` で算出スタイルを取得し、変更が正しく反映されていることを数値で検証
+
+3. 必要に応じて複数ページで確認（ナビ状態の違い、子要素の有無など）
+
+4. レスポンシブ確認が必要な場合は `emulate` でビューポートを変更:
+   - PC: `1440x900x1`
+   - タブレット: `768x1024x1,touch`
+   - スマートフォン: `375x667x1,mobile,touch`
+
+5. 問題があれば修正→ビルド→確認を繰り返す
+
+## 注意事項
+
+- BurgerEditorの `data-bge-*` / `data-bgi-*` 属性構造は変更しない
+- HTMLのFrontMatter（`---` で囲まれた部分）は慎重に扱う
+- CSSはコンポーネント単位のファイルに閉じた修正を心がける
+- `yarn dev` はバックグラウンドで実行すること（`run_in_background: true`）
+- **DevTools MCPは localhost:8000 のみに使用する。Figma等の外部URLをブラウザで開かない**
+
+## 出力形式
+
+修正後は以下を報告：
+
+- 修正したファイル一覧と各変更の概要
+- ビルド結果（成功/失敗）
+- ブラウザ確認スクリーンショット
+- `evaluate_script` による算出スタイルの検証結果

package/.claude/commands/git.md

@@ -0,0 +1,37 @@
+---
+description: Gitの操作ルール
+disable-model-invocation: true
+---
+
+# コミットの作成
+
+- 「コミット」を求められた場合:
+  1. `git diff --staged` でステージ済みファイルを確認し、ステージ済みファイル*のみ*を基にコミットメッセージを作成する。
+  2. ステージ済みファイルがない場合は、`git status` で差分を確認し、ファイルをステージしてからコミットする。
+- コミットメッセージの準備ができたら、直接 `git commit` として実行を試みる（ユーザーが適宜承認する）。
+
+# コミットメッセージの形式
+
+- 日本語で記述すること
+- Conventional Commitsのtype prefixを使用すること
+- typeの選び方:
+  - `feat` — ページ・コンポーネント・機能の新規追加
+  - `fix` — 修正・改善・リファクタリング・ビルド出力に影響するlint修正（表示崩れ・リンク切れ・動作不具合の修正、コード整理、markuplint・textlint・cspell等の修正を含む）
+  - `chore` — ビルド出力に影響しない変更（設定変更・依存更新・ビルド関連・ESLint/Stylelint/pug-lintのコードスタイル修正・formatterの修正）
+  - `docs` — ドキュメントファイル単体の変更（コードと一緒にコミットするJSDoc・コメントの修正は `feat` か `fix` を使う）
+- 迷ったら `chore` を使う
+
+# diffの確認手順
+
+差分を確認した際、以下に該当する場合は**作業を中断し、直ちにユーザーに確認を取ること**（自己判断で続行しない）:
+
+- `__assets/` 側に変更がないのに `htdocs/` 側に変更がある（意図しないビルド出力の混入の可能性）
+- プロジェクトのドメインと明らかに異なる業種や競合の情報が含まれている（AI生成物の混入・コピペミス・画像の書き出し先ミス等の可能性）
+- `.env`・クレデンシャルファイル・プライベートAPIキーが含まれている
+
+# 安全ガイドライン
+
+- pre-commitフック（husky + lint-staged）は絶対にスキップしない（`--no-verify` 禁止）
+- フックでエラーが出たらリントエラーを修正してから再コミットする
+- `main` ブランチへの直接コミット・force pushは禁止
+- コミットメッセージにはシングルクォート(')を使用する（シェル解釈問題の回避）

package/.claude/commands/release.md

@@ -0,0 +1,16 @@
+---
+description: リリース手順
+disable-model-invocation: true
+---
+
+# リリース手順
+
+以下の手順を順番に実行する。
+
+1. `main` ブランチにチェックアウトする
+2. `main` ブランチをプルする
+3. AskUserQuestionツールでリリースに含めるトピックブランチを質問する
+4. `release${YYYYMMDD}` 形式のリリースブランチを作成する（同日に複数リリースがある場合は `release${YYYYMMDD-SUFFIX}` とする）
+5. 指定された各トピックブランチをリリースブランチにマージする
+6. AskUserQuestionツールでリリースブランチをプッシュしてよいか質問する
+7. プッシュ後、リリース担当者にリリースブランチ名を伝えるようユーザーに促す

package/.claude/settings.json

@@ -0,0 +1,36 @@
+{
+	"permissions": {
+		"allow": [
+			"Bash(yarn build:*)",
+			"Bash(yarn install)",
+			"Bash(yarn lint:*)",
+			"Bash(yarn test:*)",
+			"Bash(gh repo list *)",
+			"Bash(gh repo view *)",
+			"Bash(gh repo gitignore *)",
+			"Bash(gh repo license *)",
+			"mcp__chrome-devtools__click",
+			"mcp__chrome-devtools__emulate",
+			"mcp__chrome-devtools__evaluate_script",
+			"mcp__chrome-devtools__list_console_messages",
+			"mcp__chrome-devtools__list_pages",
+			"mcp__chrome-devtools__navigate_page",
+			"mcp__chrome-devtools__new_page",
+			"mcp__chrome-devtools__take_screenshot",
+			"mcp__chrome-devtools__take_snapshot",
+			"mcp__chrome-devtools__wait_for",
+			"Skill(git)",
+			"WebFetch(domain:github.com)",
+			"WebFetch(domain:guidelines.d-zero.co.jp)",
+			"WebFetch(domain:raw.githubusercontent.com)"
+		],
+		"deny": [
+			"Bash(rm --force)",
+			"Bash(rm -rf)",
+			"Bash(rm -f)",
+			"Bash(sed *)",
+			"Bash(npm *)"
+		]
+	},
+	"enabledMcpjsonServers": ["chrome-devtools", "figma-remote-mcp"]
+}

package/.cursor/mcp.json

@@ -0,0 +1,8 @@
+{
+	"mcpServers": {
+		"chrome-devtools": {
+			"command": "yarn",
+			"args": ["exec", "chrome-devtools-mcp", "--isolated"]
+		}
+	}
+}

package/.mcp.json

@@ -0,0 +1,14 @@
+{
+	"mcpServers": {
+		"chrome-devtools": {
+			"type": "stdio",
+			"command": "yarn",
+			"args": ["exec", "chrome-devtools-mcp", "--isolated"],
+			"env": {}
+		},
+		"figma-remote-mcp": {
+			"type": "http",
+			"url": "https://mcp.figma.com/mcp"
+		}
+	}
+}

package/.yarnrc.yml

@@ -1,3 +1,6 @@
 nodeLinker: node-modules
 npmRegistryServer: 'https://registry.npmjs.org'
 enableGlobalCache: true
+enableScripts: false
+defaultSemverRangePrefix: ''
+npmMinimalAgeGate: 7d

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.1-alpha.0](https://github.com/d-zero-dev/frontend-env/compare/v5.1.0...v5.1.1-alpha.0) (2026-04-09)
+
+**Note:** Version bump only for package @d-zero/scaffold
+
+# [5.1.0](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0...v5.1.0) (2026-04-08)
+
+### Bug Fixes
+
+- **repo:** disable postinstall scripts for third-party packages ([1fa4660](https://github.com/d-zero-dev/frontend-env/commit/1fa46609d04aa4811d7718a454e9c37ceb63c590))
+- **scaffold:** add defaultSemverRangePrefix to .yarnrc.yml ([14b75c3](https://github.com/d-zero-dev/frontend-env/commit/14b75c3f17da62584efba47865ae6436bf9c4faa))
+- **scaffold:** replace prepare with postinstall for husky setup ([8ee55e0](https://github.com/d-zero-dev/frontend-env/commit/8ee55e03ba0858157891ba298be2ce842dd9772a))
+- **scaffold:** update deprecated permission pattern syntax and add emulate tool ([c73e280](https://github.com/d-zero-dev/frontend-env/commit/c73e2808be5bece35793cf5135c33d5aa61e1902))
+- use url constant in meta.pug ([3b3bc48](https://github.com/d-zero-dev/frontend-env/commit/3b3bc489f8c865df01d8289ab73ee08e476f557e))
+
+### Features
+
+- **scaffold:** add 7-day cooldown period for npm package releases ([81e20f4](https://github.com/d-zero-dev/frontend-env/commit/81e20f45534a60451fdaf2a3e28f3cb0bcc73942))
+- **scaffold:** replace redirect in index.pug with top page template ([9237385](https://github.com/d-zero-dev/frontend-env/commit/92373859f990922f7ad13d50afa57736f3dde0e7))
+
 # [5.0.0](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0-beta.19...v5.0.0) (2026-01-05)
 
 ### Bug Fixes

package/CLAUDE.md

@@ -0,0 +1,14 @@
+# D-ZERO フロントエンド開発プロジェクト
+
+## ルール
+
+- `htdocs/` はビルド出力。直接編集せず `__assets/` のソースファイルを編集すること（ただし `htdocs/img/` は直接扱ってよい）
+- `main` ブランチでの作業は禁止
+- パッケージマネージャーは `yarn` を使用すること（`npm` は使わない）
+- コミットメッセージはAIが作成するため、Conventional Commitsに従い適切な内容を記述すること
+- D-ZERO コーディングガイドラインに従うこと。各ガイドラインのインデックスから詳細ページを参照できる:
+  - [命名規則](https://raw.githubusercontent.com/d-zero-dev/frontend-guidelines/dev/src/naming/index.md)
+  - [HTML](https://raw.githubusercontent.com/d-zero-dev/frontend-guidelines/dev/src/html/index.md)
+  - [CSS](https://raw.githubusercontent.com/d-zero-dev/frontend-guidelines/dev/src/css/index.md)
+  - [JavaScript](https://raw.githubusercontent.com/d-zero-dev/frontend-guidelines/dev/src/js/index.md)
+  - [Git](https://raw.githubusercontent.com/d-zero-dev/frontend-guidelines/dev/src/git/index.md)

package/README.md

@@ -11,3 +11,12 @@
 | `yarn lint`   | リントチェック                                       |
 | `yarn build`  | ビルド                                               |
 | `yarn update` | 依存パッケージのアップデート                         |
+
+## AIコマンド（Claude Code）
+
+| コマンド                | 説明                                                 |
+| ----------------------- | ---------------------------------------------------- |
+| `/git`                  | Gitの操作ルールに従ったコミット作成                  |
+| `/release`              | リリースブランチの作成・マージ・プッシュ手順         |
+| `/fix-component [引数]` | コンポーネント名やクラス名を指定してコーディング修正 |
+| `/debug-diff [引数]`    | 2つの環境のページを比較してデバッグ                  |

package/__assets/_libs/component/c-card-list.css

@@ -1,5 +1,5 @@
 .c-card-list {
-	display: grid;
+	display: block grid;
 	grid-template-columns: repeat(auto-fit, minmax(calc(200 / 17 * 1rem), 1fr));
 	gap: 0.5rem;
 }

package/__assets/_libs/component/c-card.css

@@ -24,7 +24,7 @@
 	img {
 		inset-block-start: 0;
 		inset-inline-start: 0;
-		display: block;
+		display: block flow;
 		inline-size: 100%;
 		aspect-ratio: 4 / 3;
 		object-fit: cover;
@@ -76,13 +76,13 @@
 
 /* ブログのみ */
 .c-card__tag-item {
-	display: inline-block;
+	display: inline flow-root;
 	padding: 0;
 	margin: 0;
 	list-style: none;
 
 	span {
-		display: block;
+		display: block flow;
 		padding-block: 0.2rem;
 		padding-inline: 1rem;
 	}

package/__assets/_libs/component/c-content-main.css

@@ -69,7 +69,7 @@
 	[data-bgi='button'],
 	[data-bgi='download-file'] {
 		a {
-			display: flex;
+			display: block flex;
 			justify-content: center;
 			min-inline-size: 10em;
 			max-inline-size: 20em;
@@ -175,12 +175,12 @@
 	}
 
 	.cc-form-field-list {
-		display: flex;
+		display: block flex;
 		flex-direction: column;
 	}
 
 	.cc-form-fieldset {
-		display: block;
+		display: block flow;
 		padding-block: 1rem;
 		padding-inline: 2rem;
 
@@ -197,19 +197,19 @@
 	}
 
 	.cc-form-fieldset-heading {
-		display: flex;
+		display: block flex;
 		align-items: center;
 		font-size: calc(18 / 16 * 1rem);
 		font-weight: bold;
 
 		label {
-			display: block;
+			display: block flow;
 			cursor: pointer;
 		}
 
 		.required,
 		.optional {
-			display: block;
+			display: block flow;
 			margin-block: 0;
 			margin-inline: 0 0.5rem;
 			font-size: calc(12 / 18 * 1rem);
@@ -241,7 +241,7 @@
 
 		&[data-type='text'],
 		&[data-type='select'] {
-			display: grid;
+			display: block grid;
 			grid-template:
 				'before-attachment input after-attachment' auto
 				'description description description' auto
@@ -293,7 +293,7 @@
 		}
 
 		.mail-input {
-			display: block;
+			display: block flow;
 			grid-area: input;
 			inline-size: 100%;
 
@@ -346,12 +346,12 @@
 		}
 
 		.checkbox {
-			display: flex;
+			display: block flex;
 			align-items: center;
 			justify-content: flex-start;
 
 			input {
-				display: block;
+				display: block flow;
 				padding: 0;
 				margin: 0;
 				line-height: 1;
@@ -364,12 +364,12 @@
 
 		.mail-group-radio {
 			> span {
-				display: flex;
+				display: block flex;
 				align-items: center;
 				justify-content: flex-start;
 
 				input {
-					display: block;
+					display: block flow;
 					padding: 0;
 					margin-block: 0;
 					margin-inline: 0 0.5rem;

package/__assets/_libs/component/c-footer.css

@@ -9,26 +9,26 @@
 
 .c-footer__links {
 	ul {
-		display: flex;
+		display: block flex;
 		justify-content: center;
 		padding: 0;
 		margin-block: 0 1rem;
 		margin-inline: 0;
 
 		@media (--sm-lte) {
-			display: block;
+			display: block flow;
 		}
 	}
 
 	li {
-		display: block;
+		display: block flow;
 		padding: 0;
 		margin-block: 0;
 		margin-inline: 1rem;
 	}
 
 	a {
-		display: block;
+		display: block flow;
 		padding: 1rem;
 		color: inherit;
 		text-decoration: none;
@@ -36,6 +36,6 @@
 }
 
 .c-footer__copyright {
-	display: block;
+	display: block flow;
 	text-align: center;
 }

package/__assets/_libs/component/c-header.css

@@ -5,14 +5,14 @@
 }
 
 .c-header__body {
-	display: flex;
+	display: block flex;
 	align-items: center;
 	justify-content: space-between;
 	margin-block: 0;
 	margin-inline: auto;
 
 	@media (--md-lte) {
-		display: block;
+		display: block flow;
 	}
 }
 
@@ -29,7 +29,7 @@
 	margin: 0;
 
 	> a {
-		display: block;
+		display: block flow;
 		color: inherit;
 		text-decoration: none;
 	}
@@ -40,13 +40,13 @@
 }
 
 .c-header__info {
-	display: flex;
+	display: block flex;
 	flex: 0 1 auto;
 	flex-direction: column;
 }
 
 .c-header__links {
-	display: flex;
+	display: block flex;
 	flex: 0 1 auto;
 	padding: 0;
 	margin: 0;
@@ -57,11 +57,11 @@
 	}
 
 	> li {
-		display: block;
+		display: block flow;
 		flex: 0 1 auto;
 
 		> a {
-			display: block;
+			display: block flow;
 			padding-block: 0.5rem;
 			padding-inline: 1rem;
 			color: inherit;
@@ -84,7 +84,7 @@
 		border-radius: 5px;
 
 		@media (--md-lte) {
-			display: block;
+			display: block flow;
 			inline-size: calc(80 / 100 * 100%);
 			margin-block: 0;
 			margin-inline: auto;

package/__assets/_libs/component/c-media-list.css

@@ -1,5 +1,5 @@
 .c-media-list {
-	display: grid;
+	display: block grid;
 	grid-template-columns: 1fr;
 	gap: 0.5rem;
 }