/**
 * 施工事例（Works）セクション（.works）
 * カード本体のスタイルは assets/css/work-card.css（共通コンポーネント）を参照。
 * ここではグリッド（カードの並び）のみを定義する。
 */

.works {
	background-color: var(--color-navy);
}

/* 背景がネイビーになるため、見出し（刷毛アイコン含む。currentColor で連動）のみ白にする */
.works .section-heading {
	color: #ffffff;
}

.works__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* モバイル: 1カラム */
.works__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/*
 * デスクトップ: auto-fit + minmax。3件時にきれいな3列になるよう調整しつつ、
 * 件数が増えた場合も自動で折り返す。
 */
@media (min-width: 769px) {
	.works__grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 24px;
	}
}