/*
 * 2カラム・3カラムの枠
 * サイトの表示、クラシックエディターとブロックエディターの入力画面で共通に使う
 *   クラシック：.yamaso-cols > .yamaso-col
 *   ブロック  ：.yamaso-cols（カラムブロック）> .wp-block-column
 */
.yamaso-cols {
	display: flex;
	gap: 24px;
	margin: 1.5em 0;
}

.yamaso-cols > .yamaso-col,
.yamaso-cols > .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 16px;
	border: 1px solid #ddd;
	box-sizing: border-box;
}

/* 枠の中の最初と最後の要素の余白を詰める */
.yamaso-cols > .yamaso-col > :first-child,
.yamaso-cols > .wp-block-column > :first-child {
	margin-top: 0;
}

.yamaso-cols > .yamaso-col > :last-child,
.yamaso-cols > .wp-block-column > :last-child {
	margin-bottom: 0;
}

/* スマートフォンでは縦に並べる */
@media (max-width: 767px) {
	.yamaso-cols {
		flex-direction: column;
	}
}