* {margin: 0;}
body {background-color: #888868;
	font-family: sans-serif;
	line-height: 1.2em;
	max-width: 120rem;
	margin: auto;}

header, footer {background-color: #a8a890;
	display: grid;
	align-items: center;
	text-align: center;
	padding: 1rem;}
header {grid-template: "head" "a" "b" "c";
	gap: 1rem;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
	word-spacing: 0.4em;}
header a {color: inherit; text-decoration: inherit;}

section {background-color: #d8d8c8;
	display: grid;
	grid-template: "txt";
	justify-items: center;
	align-items: center;
	padding: 2rem;
	gap: 2rem;}

main, .model, .txt, #gallery {
	background-color: #f8f8f0;
	display: grid;
	padding: 1rem;
	gap: 1rem;}
main {padding: 4rem 2rem; gap: 4rem;}
.model {grid-template: "head head" "a b";
	justify-items: center;}
.txt {grid-template: "head";
	grid-area: txt;
	display: grid;
	padding: 2rem;}

h1, h2, h3 {font-size: 1.8rem;
	line-height: 1.2em;
	grid-area: head;
	font-weight: normal;}
h1 {line-height: 1.5em;}
h3 {font-size: 1.5rem;}
ul {padding-left: 1em;}
img {object-fit: contain; max-height: 100%; width: 100%;}

#about-us {grid-template: "txt" "a" calc((100vw - 8rem) * 0.7);}
#catalogue {grid-template: "a b" "c d" "txt txt";}
#re-upholstery {grid-template: "a b" "txt txt";}
#contact-us {grid-template: "a" "txt";}
#gallery {grid-template: "a b";
	grid-template-rows: repeat(6, calc((100vw - 13rem) * 0.3));}
@media only screen and (min-width: 720px) {
	header {grid-template: "head head head" "a b c";}
	footer {grid-template: "a b";}
	#gallery {
		grid-template: "a b c";
		grid-template-rows: repeat(4, calc((100vw - 13rem) * 0.2));
	}}
@media only screen and (min-width: 960px) {
	#about-us {grid-template: "txt a" / auto 25rem;}
	#catalogue {grid-template: "a b txt" "c d txt" / 15rem 15rem;}
	#bespoke {grid-template: "txt a" / auto 30rem;}
	#re-upholstery {grid-template: "a b txt" / 15rem 15rem;}
	#contact-us {grid-template: "txt a" / auto 35rem;}
	#models {grid-template: "txt txt" "a b";}
	#gallery {
		grid-template: "a b c d";
		grid-template-rows: repeat(3, calc((100vw - 13rem) * 0.15));
	}}
@media only screen and (min-width: 1200px) {
	header {grid-template: "head a b c";}}