/*--------------------------------------------------------------
# Grid Layout (グリッドレイアウト)
--------------------------------------------------------------*/

.l-grid {
	display: grid;
	gap: var(--spacing-md);
}

.l-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.l-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.l-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media screen and (min-width: 768px) {
	.l-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.l-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.l-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}