/*		|8		|		|24		|		|40		|		|56		|		|72		|		|88		|		|104	|		|*/
.product article{
		max-width				:	var(--boxed)						;
		margin					:	0 auto								;
}
.product .title{
		position				:	relative							;
		margin					:	24px 20px 0							;
		padding					:	40px								;
		overflow				:	hidden								;
		border-top				:	4px solid var(--silver)				;
		border-radius			:	8px									;
		background				:	var(--navy)							;
		box-shadow				:	var(--shadow)						;
}
.product .title::before{
		content					:	""									;
		position				:	absolute							;
		inset					:	0									;
		background				:	url(/images/2021/08/S2000_Hood_30_PERCENT.png) center/cover no-repeat	;
		opacity					:	.08									;
		filter					:	saturate(0)							;
}
.product h1{
		position				:	relative							;
		margin					:	0									;
		font-size				:	38px								;
		text-align				:	center								;
		color					:	#fff								;
}
.product .badges{
		background				:	none								;
}
.product .badges ul{
		padding					:	30px 20px 0							;
}
.product .badges li{
		display					:	flex								;
		flex-direction			:	column								;
		justify-content			:	center								;
		margin					:	0									;
		font-size				:	16px								;
		font-weight				:	400									;
		color					:	var(--navy)							;
}
.product .badges li::before{
		width					:	24px								;
		height					:	24px								;
		margin-bottom			:	0									;
		background				:	rgba(21,62,97,.44)					;
}
.product .badges .family::before,.product .badges .experience::before{
		width					:	30px								;
}
.product h2{
		color					:	var(--navy)							;
}
.intro{
		display					:	flex								;
		align-items				:	center								;
		padding					:	20px 20px 0							;
}
.intro figure{
		flex					:	1 1 50%								;
		margin					:	0									;
		padding					:	10px								;
}
.intro img{
		width					:	100%								;
}
.intro figcaption,.figures figcaption{
		margin-top				:	8px									;
		text-align				:	center								;
		color					:	var(--text)							;
}
.features{
		flex					:	1 1 50%								;
		margin					:	0									;
		padding					:	40px								;
		list-style				:	none								;
		font-family				:	"Barlow",sans-serif					;
		font-size				:	20px								;
		font-weight				:	500									;
}
.features li{
		position				:	relative							;
		padding-left			:	23px								;
}
.features li+li{
		margin-top				:	35px								;
}
.features li::before{
		content					:	""									;
		position				:	absolute							;
		left					:	0									;
		top						:	50%									;
		width					:	14px								;
		height					:	14px								;
		margin-top				:	-7px								;
		border-radius			:	50%									;
		background				:	var(--silver)						;
}
.videos{
		display					:	grid								;
		grid-template-columns	:	repeat(3,1fr)						;
		gap						:	20px								;
		padding					:	20px 30px							;
}
.video{
		width					:	100%								;
		aspect-ratio			:	16/9								;
		border					:	0									;
}
.more{
		padding					:	4px 30px 40px						;
}
.more>h2{
		margin-left				:	-10px								;
}
.more h3{
		font-size				:	26px								;
		color					:	var(--navy)							;
}
.figures{
		display					:	grid								;
		grid-template-columns	:	repeat(2,1fr)						;
		gap						:	20px								;
		margin-top				:	40px								;
}
.figures figure{
		margin					:	0									;
}
.figures img{
		width					:	77%									;
		margin					:	0 auto								;
}
.figures figcaption{
		font-style				:	italic								;
}
.controls{
		padding					:	0 30px 20px 20px					;
}
.controls dl{
		margin					:	0									;
}
.controls div{
		position				:	relative							;
		padding-left			:	31px								;
}
.controls div+div{
		margin-top				:	13px								;
		padding-top				:	13px								;
}
.controls .ruled{
		border-top				:	1px solid #ddd						;
}
.controls div::before{
		content					:	""									;
		position				:	absolute							;
		left					:	0									;
		width					:	21px								;
		height					:	1.85em								;
		background				:	var(--silver)						;
		-webkit-mask			:	center/contain no-repeat			;
		mask					:	center/contain no-repeat			;
}
.controls .mobile::before{
		width					:	14px								;
		-webkit-mask-image		:	url(/images/icons/mobile.svg)		;
		mask-image				:	url(/images/icons/mobile.svg)		;
}
.controls .cog::before{
		-webkit-mask-image		:	url(/images/icons/cog.svg)			;
		mask-image				:	url(/images/icons/cog.svg)			;
}
.controls .circle::before{
		-webkit-mask-image		:	url(/images/icons/circle.svg)		;
		mask-image				:	url(/images/icons/circle.svg)		;
}
.controls dt{
		display					:	inline								;
		font-weight				:	700									;
}
.controls dd{
		display					:	inline								;
		margin					:	0 0 0 .25em							;
}
.call{
		margin					:	40px 20px							;
		padding					:	40px								;
		border-top				:	4px solid var(--silver)				;
		border-radius			:	8px									;
		background				:	var(--navy)							;
		color					:	#fff								;
		box-shadow				:	var(--shadow)						;
}
.call h2{
		margin-bottom			:	20px								;
		color					:	#fff								;
}
.call p{
		margin					:	0 0 20px							;
}
.call .actions{
		gap						:	20px								;
		margin					:	0									;
}
.call .button{
		padding					:	10px 40px							;
		border					:	4px solid var(--silver)				;
		font-size				:	18px								;
		font-weight				:	700									;
		line-height				:	1.2									;
		text-shadow				:	0 0 10px rgba(0,0,0,.3)				;
		box-shadow				:	var(--shadow)						;
}
.call .button:hover,.call .button:focus{
		border-color			:	#f8ce65								;
		background				:	#f8ce65								;
}
.call .outline{
		color					:	var(--silver)						;
		background				:	transparent							;
		box-shadow				:	none								;
}
.gallery{
		padding					:	20px 30px							;
}
.gallery ul{
		display					:	grid								;
		grid-template-columns	:	repeat(3,1fr)						;
		gap						:	20px								;
		margin					:	0									;
		padding					:	0 0 0 10px							;
		list-style				:	none								;
}
.gallery img{
		width					:	100%								;
}
@media (max-width:1024px){
	.product .badges li{
		font-size				:	14px								;
	}
	.call .button{
		font-size				:	14px								;
	}
}
@media (max-width:767px){
	.product h1{
		font-size				:	25px								;
	}
	.product .badges ul{
		flex-wrap				:	nowrap								;
		padding					:	0 20px								;
	}
	.product .badges li{
		flex					:	1 1 25%								;
		padding					:	10px								;
		font-size				:	9px									;
	}
	.intro{
		flex-direction			:	column								;
		padding					:	20px								;
	}
	.features{
		padding					:	0									;
	}
	.videos,.figures,.gallery ul{
		grid-template-columns	:	1fr									;
	}
	.call .button{
		margin-bottom			:	10px								;
	}
}