@charset "utf-8";
/* CSS Document */

header {
	background:green;
	height:95px;
}

.content-section {
	padding:0;
}

main.content {
	width:100vw;
}

.content-container {
	max-width:1200px;
	margin:0 auto;
	padding:2rem 0 4rem 0;
}

section p {
	margin-bottom:1rem;
}

.content-image {
	width:100%;
	aspect-ratio: 2/1.3;
	margin-bottom:2rem;
}

@media (min-width:1200px) {
	.content-image {
		border-radius:1rem;
	}
}

.img-how {background:url(/images/img-garage_002.jpg) center center no-repeat;background-size:cover;}
.img-why {background:url(/images/img-garage_035.jpg) center center no-repeat;background-size:cover;}
.img-automation {background:url(/images/img-garage_026.jpg) center center no-repeat;background-size:cover;}

.img-sectional01 {background:url(/images/sectional01.jpeg) center center no-repeat;background-size:cover;}
.img-sectional02 {background:url(/images/sectional02.jpeg) center center no-repeat;background-size:cover;}
.img-sectional03 {background:url(/images/sectional04.jpeg) center center no-repeat;background-size:cover;}

.img-bespoke01 {background:url(/images/bespoke01.jpeg) center center no-repeat;background-size:cover;}
.img-bespoke02 {background:url(/images/bespoke02.jpeg) center center no-repeat;background-size:cover;}
.img-bespoke03 {background:url(/images/bespoke04.jpeg) center center no-repeat;background-size:cover;}

.img-upandover01 {background:url(/images/upandover01.jpeg) center center no-repeat;background-size:cover;}
.img-upandover02 {background:url(/images/upandover02.jpeg) center center no-repeat;background-size:cover;}
.img-upandover03 {background:url(/images/upandover03.jpeg) center center no-repeat;background-size:cover;}


.heading {
	padding:3rem;
	color:white;
	background:var(--grey);
}

/*Space between text and image on mobile*/
.content-right, .content-left {
	padding:1rem 3rem 2rem 3rem;
}

/* start Intro*/
.intro {
	background:url(/images/roller34.jpeg)center center no-repeat;
	background-size:cover;
	
}

.intro-container {
	margin:auto;
	height:fit-content;
	background:rgba(0,0,0,0.8);
	padding:7rem 2rem;
	text-align:center;
	
}

.intro-heading {
	color:white;
	font-size:3rem;
	line-height:120%;
	font-weight:100;
	margin:0rem auto 2rem auto;
	max-width:700px; 
}

.intro-body {
	margin-bottom:3rem;
	color:white;
	max-width:800px;
	margin:0 auto 3rem auto;
}

/* end intro*/

.how {
	
}

.why {
	
}

.automation {
	
}

/*start options section*/

.options-section {
	width:100vw;
	background:var(--grey);
	min-height:5rem;
}

.options-section h2 {
	color:white;
	text-align:center;
	padding:1rem 0 0 0;
}

.options-container {
	display:grid;
	grid-template-columns:1fr;
	padding:2rem 0;
	list-style:none;
}

.option {
  aspect-ratio: 2/1;
	text-align:center;
	background:blue;
	display:grid;
	padding:1rem 0;
}

.option a {
	padding:1.2rem 2rem;
	color:white;
	text-decoration:none;
	background:rgba(182,2,3,0.9);
	display:block;
	align-self:center;
	justify-self:center;
	margin:0 1rem;
	border-radius:10px;
	text-transform:uppercase;
	font-size:1.5rem;
}

	.option-upAndOver {
		background:url(/images/upandover02.jpeg) center center no-repeat;
		background-size:cover;
	}

	.option-sectional {
		background:url(/images/sectional02.jpeg) center center no-repeat;
		background-size:cover;
	}

	.option-bespoke {
		background:url(/images/bespoke01.jpeg) center center no-repeat;
		background-size:cover;
	}

	.option-roller {
		background:url(/images/roller33.jpeg) center center no-repeat;
		background-size:cover;
	}


@media (min-width:1200px) {
	
	.options-section h2 {
		color:white;
		text-align:center;
		padding:2rem;
	}
	
	.options-container {
		display:grid;
		grid-template-columns:repeat(3,1fr);
		min-height:10rem;
		margin:0 auto;
	}
	
  /*list items*/
	.option {
		display:grid;
		width:100%;
		aspect-ratio:2/1;
	}

	.option a {
		display:grid;
		background:rgba(0,0,0,0.8);
		color:white;
		font-size:1.5rem;
		text-decoration:none;
		height:3em;
		transition:font-size 0.3s ease-out, background 0.3s ease-out;
	}
	
	.option a span {
		place-self: center;
		display:block;
	}
	
	.option:hover a {
		font-size:2rem;
		background:var(--red);
	}
	
	.option:hover {
		cursor:pointer;
	}
	
}

/*end options section*/



@media (min-width:1200px) {
	
	.serpentine {
		display:grid;
	}
	
	section.why {
		grid-template-columns: 2fr 1fr;
	}
	
	section.how, section.automation {
		grid-template-columns: 1fr 2fr;
	}
	
	/*at 1200px put text to left of image*/
	.content-right {
		grid-column:1/2;
		grid-row:1/2;
		padding-left:0;
	}
	
	/*at 1200px put text to right of image*/
	.content-left {
		grid-column:2/3;
		grid-row:1/2;
	}
	
}