.row {
	max-width: 960px;
	margin: 0 auto;
	clear: both;
	display: block;
	display: flex;
	flex-basis: 960px;
	flex-wrap: wrap;
	container-type: inline-size;
}

.row h2,h3 {
	flex-basis: 960px;
}

.span1 {
	flex-basis: 80px;
}

.span2 {
	flex-basis: 160px;
}

.span3 {
	flex-basis: 240px;
}

.span4 {
	flex-basis: 320px;
}

.span5 {
	flex-basis: 400px;
}

.span6 {
	flex-basis: 480px;
}

.span7 {
	flex-basis: 560px;
}

.span8 {
	flex-basis: 640px;
}

.span9 {
	flex-basis: 720px;
}

.span10 {
	flex-basis: 800px;
}

.span11 {
	flex-basis: 880px;
}

.span12 {
	flex-basis: 960px;
}

/*****************************************/
/* 
.offset1 {
	margin: 0 40px;
}
.offset2 {
	margin: 0 80px;
}
.offset3 {
	margin: 0 120px;
}
.offset4 {
	margin: 0 160px;
}
.offset5 {
	margin: 0 200px;
}
.offset6 {
	margin: 0 240px;
}
.offset7 {
	margin: 0 280px;
}
.offset8 {
	margin: 0 320px;
}
.offset9 {
	margin: 0 360px;
}
.offset10 {
	margin: 0 400px;
}
.offset11 {
	margin: 0 440px;
}
.offset12 {
	margin: 0 480px;
} */

@media screen and (max-width: 980px) {

	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 {
		flex-basis: 100%;
	}
	.sp-span1 {
		flex-basis: 8.333%;
	}
	.sp-span2 {
		flex-basis: 16.666%;
	}
	.sp-span3 {
		flex-basis: 24.999%;
	}
	.sp-span4 {
		flex-basis: 33.333%;
	}
	.sp-span5 {
		flex-basis: 41.666%;
	}
	.sp-span6 {
		flex-basis: 50%;
	}
	.sp-span7 {
		flex-basis: 58.333%;
	}
	.sp-span8 {
		flex-basis: 66.666%;
	}
	.sp-span9 {
		flex-basis: 75%;
	}
	.sp-span10 {
		flex-basis: 83.333%;
	}
	.sp-span11 {
		flex-basis: 91.666%;
	}
	.sp-span12 {
		flex-basis: 100%;
	}
}