/* 対象：グリッドレイアウトのグループに、サイズ別の gap を適用 */
.wp-block-group.is-layout-grid.has-grid-gap-20 {
	gap: 20px !important;
}

.wp-block-group.is-layout-grid.has-grid-gap-60 {
	gap: 60px !important;
}

/* 767px以下のgap */
/* 未指定の場合はPCのgapをそのまま引き継ぐ */
@media (max-width: 767px) {
	.wp-block-group.is-layout-grid.has-grid-gap-sp-0 {
		gap: 0 !important;
	}

	.wp-block-group.is-layout-grid.has-grid-gap-sp-10 {
		gap: 10px !important;
	}

	.wp-block-group.is-layout-grid.has-grid-gap-sp-20 {
		gap: 20px !important;
	}

	.wp-block-group.is-layout-grid.has-grid-gap-sp-30 {
		gap: 30px !important;
	}

	.wp-block-group.is-layout-grid.has-grid-gap-sp-40 {
		gap: 40px !important;
	}

	.wp-block-group.is-layout-grid.has-grid-gap-sp-60 {
		gap: 60px !important;
	}
}

/* エディタ内でも確実に適用 */
.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-20 {
	gap: 20px !important;
}

.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-60 {
	gap: 60px !important;
}

@media (max-width: 767px) {
	.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-sp-0 {
		gap: 0 !important;
	}

	.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-sp-10 {
		gap: 10px !important;
	}

	.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-sp-20 {
		gap: 20px !important;
	}

	.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-sp-30 {
		gap: 30px !important;
	}

	.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-sp-40 {
		gap: 40px !important;
	}

	.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-gap-sp-60 {
		gap: 60px !important;
	}
}

/* === 991px以下で1列化（ON時のみ）=== */
@media (max-width: 991px) {
	.wp-block-group.is-layout-grid.has-grid-collapse-991 {
		grid-template-columns: 1fr !important;
	}
}

/* エディタ側 */
@media (max-width: 991px) {
	.editor-styles-wrapper .wp-block-group.is-layout-grid.has-grid-collapse-991 {
		grid-template-columns: 1fr !important;
	}
}