* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Josefin Sans', sans-serif;
}

.grid {
	display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: auto;
	grid-template-areas:
		"image"
		"title"
		"sharing"
		"article"
		"info"
		"footer";
}

img {
	max-width: 100%;
}

.image {
	grid-area: image;
	margin: 0;
	padding: 0;
}

#bike {
	max-width: 100%;
	height: auto;
	display: block;
}

.title {
	grid-area: title;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1em;
	padding: 5px;
	min-height: 50px;
	background-color: #F44708;
}

.sharing {
	grid-area: sharing;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #688E26;
}

.btn {
	font-size: 16px;
	width: 30%;
	padding: 3px;
	margin: 5px;
	border: 1px solid #666;
	background-color: #688E26;
	border-radius: 6px;
}

.btn:hover {
	color: #688E26;
	background-color: #111;
}

.article {
	grid-area: article;
	padding: 8px;
	text-align: justify;
	background-color: #FAA613;
}

.info {
	grid-area: info;
	display: grid;
	grid-template-columns: 30vw 70vw;
	grid-template-rows: auto;
	grid-template-areas:
		"photo bio";
	background-color: #666683;
}

#bill {
	grid-area: photo;
	width: auto;
	height: 83px;
}

#bio {
	grid-area: bio;
	margin-top: auto;
	margin-bottom: auto;
	padding: 8px;
	text-align: justify;
}


.footer {
	grid-area: footer;
	text-align: center;
	font-size: 12px;
	background-color: #550527;
	color: white;
	min-height: 28px;
	display: block;
}

.footer > p {
	padding-top: 5px;
	letter-spacing: 5px;
}

.footer a {
	text-decoration: none;
	color: #ddddff;
}

.footer:hover {
	background-color: white;
}

.footer:hover a {
	color: blue;
	font-weight: 700;
}

/******************************/

/*media query 700*/

@media screen and (min-width: 700px) and (max-width: 1439px){
	.grid {
		display: grid;
		grid-gap: 3px;
		max-height: 100vh;
		background-color: black;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 2fr 2fr 2fr 3.3fr 0.7fr;
		grid-template-areas:
			"title title title image image image image"
			"title title title image image image image"
			"sharing sharing article article article article article"
			"info info article article article article article"
			"footer footer footer footer footer footer footer";
	}

	.btn {
		height: 40px;
	}

	.info {
		grid-template-columns: auto;
	}

	#bill {
		align-self: center;
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer > p {
		letter-spacing: 10px;
	}
}

/***********************************/

/*media query 1440*/

@media screen and (min-width: 1440px){
	.grid {
		display: grid;
		grid-gap: 5px;
		height: 100vh;
		background-color: black;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 1fr 1.7fr 2.6fr 0.7fr;
		grid-template-areas:
			". title title title title title ."
			"image image article article article article info"
			"sharing sharing article article article article info"
			". footer footer footer footer footer .";
	}

	body {
		max-width: 1400px;
		margin: auto;
	}

	.image {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.info {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 2fr;
		grid-template-areas:
			"photo"
			"bio";
	}

	#bill {
		align-self: center;
		justify-self: center;
	}

	#bio {
		align-self: start;
		justify-self: center;
		padding: 12px;
		margin: 0;
	}
}