div[class^='split-'],
div[class*=' split-']{
	--gap:48px;
		
	display:flex;
	flex-wrap: wrap;
	column-gap:var(--gap);
	row-gap:24px;
}
.split-1-1>div{
	width:calc(50% - var(--gap) / 2);
}
.split-1-1-1>div{
	width:calc(33.33% - var(--gap) / 3 * 2);
}
.split-1-1-1-1>div{
	width:calc(25% - var(--gap) / 4 * 3);
}
.split-1-2>div:nth-child(1),
.split-2-1>div:nth-child(2){
	width:calc(33.33% - var(--gap) / 2);
}
.split-1-2>div:nth-child(2),
.split-2-1>div:nth-child(1){
	width:calc(66.66% - var(--gap) / 2);
}
.split-1-3>div:nth-child(1),
.split-3-1>div:nth-child(2){
	width:calc(25% - var(--gap) / 2);
}
.split-1-3>div:nth-child(2),
.split-3-1>div:nth-child(1){
	width:calc(75% - var(--gap) / 2);
}
@media (max-width: 799px){
	.split-1-1-1-1>div{
		width:calc(50% - var(--gap) / 2);
	}
}
@media (max-width: 599px){
	.split-1-1>div,
	.split-1-1-1>div,
	.split-1-1-1-1>div,
	.split-1-2>div:nth-child(1),
	.split-1-2>div:nth-child(2),
	.split-2-1>div:nth-child(1),
	.split-2-1>div:nth-child(2),
	.split-1-3>div:nth-child(1),
	.split-1-3>div:nth-child(2),
	.split-3-1>div:nth-child(1),
	.split-3-1>div:nth-child(2){
		width:100%;
	}
}