/* --- Base Styles --- */

html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
	background-color: #f8f8ff;
	font-family: "DM Sans", sans-serif;
}

main {
	display: flex;
	flex-flow: column wrap;
	align-content: center;
}

section {
	max-width: 375px;
	display: flex;
	justify-content: center;
	margin: 0 1em;
}

.content-wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	margin: 1em 0;
	padding: 1em;
	border-radius: 0.9em;
}

h1 {
	font-size: 2.5em;
	width: 70%;
	align-self: center;
	font-weight: 500;
	margin: .4em 0;
	line-height: 1em;
}

h2 {
	align-self: center;
	text-align: left;
	line-height: 1em;
	font-size: 1.75em;
	font-weight: 600;
	margin-top: 0;
}

h3 {
	justify-self: flex-start;
	text-align: left;
	font-weight: 600;
	line-height: 1em;
	font-size: 1.5em;

}

img {
	width: 50%;
	align-self: center;
}

p {
	width: 70%;
	font-size: 1.125em;
	align-self: center;
	margin: 0.5em 0 1em;
	line-height: 1.1em;
}

.group-1 {
	background-color: hsl(256, 67%, 59%);
	color: white;
}

.group-2 {
	background-color: white;
}

.group-3 {
	background-color: hsl(39, 100%, 71%);
}

/* --- Box 1 --- */

.box-1 span {
	color: gold;
}

.box-1 img {
	width: 60%;
}

/* --- Box 2 --- */

.box-2 .content-wrapper {
	justify-content: flex-start;
}

.box-2 img {
	width: 100%;
}

.box-2 h3 {
	margin: 1em 0 0;
	width: 90%;
}

/* --- Box 3 --- */

.box-3 .content-wrapper{
	padding-bottom: 0;
	justify-content: flex-start;
}

.box-3 h3 {
	margin: 0 0 0.1em;
	width: 80%;
}

.box-3 img {
	width: 65%;
	object-fit: cover;
	object-position: 0 1.3em;
}

/* --- Box 4 --- */

.box-4 .content-wrapper {
	background-color: hsl(254, 88%, 90%);
}

.box-4 h3 {
	text-align: center;
	margin: 0.5em 0 1em;
}

.box-4 img {
	width: 100%;
}

.box-4 p {
	width: 85%;
	font-size: 1.1em;
	font-weight: 450;
	margin: 1.25em 0 1em;
}

/* --- Box 5 --- */

.box-5 img {
	width: 75%;
}

.box-5 h2 {
	width: 65%;
	margin: 1.5em 0 0;
	text-align: center;
	align-self: center;
}

/* --- Box 6 --- */

.box-6 .content-wrapper {
	justify-content: flex-start;
}

.box-6 h1 {
	align-self: flex-start;
	text-align: left;
	margin: 0;
}

.box-6 p {
	align-self: flex-start;
	text-align: left;
}

.box-6 img {
	width: 55%;
}

/* --- Box 7 --- */

.box-7 .content-wrapper {
	background-color: hsl(31, 66%, 93%);
	padding: 1.5em 1.7em;
	justify-content: flex-start;
}

.box-7 em {
	color: hsl(256, 67%, 59%);
}

.box-7 img {
	margin-bottom: 0.5em;
	width: 60%;
}

/* --- Box 8 --- */

.box-8 .content-wrapper {
	justify-content: flex-start;
	padding-left: 1.3em;
}

.box-8 h2 {
	width: 90%;
}

.box-8 img {
	width: 65%;
}


/* --- Attribuiton --- */

.attribution {
	font-size: 11px;
	text-align: center;
}

.attribution a {
	color: hsl(228, 45%, 44%);
}


/* ===== Tablet Styles ===== */
@media only screen and (min-width: 768px) {

	main {
		flex-flow: row-reverse nowrap;
	}

	section {
		max-width: 100%;
	}

	h3 {
		width: 80%;

	}

	#desktopGroup-1 {
		display: flex;
		width: 75%;
		flex-flow: row wrap;
		justify-content: center;
		overflow: hidden;
	}	

	#desktopGroup-1A {
		display: flex;
		flex-flow: row nowrap;
		height: 70%;
	}

	#desktopGroup-1A-1 {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		flex-basis: 67%;
	}

	.box-1 {
		height: 50%;
	}

	.box-1 .content-wrapper {
		gap: 1em;
		align-content: center;
		padding: 0;
	}

	.box-1 h1 {
		font-size: 3em;
		margin: 0;
		align-self: flex-end;
		width: 85%;
	}

	.box-1 img {
		max-width: 25%;
		margin: 0;
		
	}

	.box-1 p {
		margin: 0;
		width: 100%;
	}

	#desktopGroup-1A-1-1 {
		display: flex;
		flex-flow: row nowrap;
		height: 50%;
	}

	.box-2, .box-3 {
		width: 45%;
		flex-grow: 1;
		margin: 0 0.5em;
	}

	.box-2 .content-wrapper {
		padding-bottom: 0;
		align-content: flex-start;
	}

	.box-2 img {
		align-self: flex-start;
	}

	.box-2 h3 {
		margin: 1em 0 0;
	}

	.box-3 .content-wrapper {
		overflow: hidden;
		padding: 1em 0 0;
	}

	.box-3 h3 {
		margin: auto;
		width: 80%;
	}

	.box-3 img {
		width: 80%;
		align-self: flex-end;
		margin: auto auto 0;
		object-position: 0 1em;
	}

	#desktopGroup-1A-2 {
		display: flex;
		flex-basis: 33%;
	}

	.box-4 {
		margin-left: 0.5em;
	}

	.box-4 .content-wrapper {
		justify-content: flex-start;
		text-align: left;
		align-content: center;
		padding: 2em 0;
		overflow: hidden;
	}

	.box-4 h3 {
		text-align: left;
		padding-left: 1.5em;
		width: 100%;
		margin-bottom: 0.5em;
	}

	.box-4 img {
		object-position: 2em 0;
		width: 130%;
	}

	.box-4 p {
		padding-left: 2em;
		font-size: 1em;
	}

	#desktopGroup-1B {
		display: flex;
		flex-flow: row-reverse nowrap;
		min-width: 100%;
		height: 30%;
	}

	.box-5 {
		flex-basis: 75%;
	}

	.box-5 .content-wrapper {
		justify-content: space-between;
		align-items: center;
		padding-right: 0;
	}

	.box-5 img {
		width: 35%;
		margin-right: 1em;
		margin-bottom: 1em;
	}

	.box-5 h2 {
		font-size: 2em;
		font-weight: 500;
		margin: 0.5em 0 1em;
		width: 55%;
		text-align: left;
		line-height: 1em;
	}

	.box-6 {
		flex-basis: 25%;
		margin-right: 0;
	}

	.box-6 .content-wrapper {
		align-content: center;
		padding: 0 1em;
	}

	.box-6 h1 {
		font-size: 3em;
		margin-bottom: 0.2em;
	}

	.box-6 p {
		width: 100%;
		margin-bottom: 2em;
	}

	.box-6 img {
		width: 80%;
	}

	#desktopGroup-2 {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
		width: 25%;
		overflow: hidden;
	}

	.box-7, .box-8 {
		height: 50%;
		margin: 0 0 0 0.5em;
	}

	.box-7 .content-wrapper {
		align-content: center;
		padding: 1em;
	}

	.box-7 h2, .box-8 h2 {
		font-size: 2em;
		font-weight: 500;
		margin-bottom: 0.5em;
		width: 80%;
	}

	.box-7 img {
		width: 75%;
		margin-left: 0.5em;
	}

	.box-8 img {
		width: 90%;
		margin: auto;
	}
}



/* ===== Desktop Styles ===== */
@media only screen and (min-width: 1200px) {

	h3 {
		font-size: 2.4em;
	}

	.box-1 h1 {
		font-size: 4em;
	}

	.box-2 {
		overflow: hidden;
	}

	.box-2 img {
		width: 145%;
	}

	.box-2 h3 {
		margin-top: 0.5em;
	}

	.box-3 h3 {
		margin: 0.3em auto -0.5em;
	}

	.box-3 img {
		object-position: 0 2em;
	}

	.box-4 img {
		object-position: 3.5em 0;
	}

	.box-4 p {
		font-size: 1.3em;
		padding-left: 3em;
	}

	.box-5 .content-wrapper {
		justify-content: space-evenly;
		padding-left: 0;
	}

	.box-5 h2 {
		font-size: 3.5em;
		width: 50%;
	}

	.box-6 .content-wrapper {
		align-content: space-evenly;
	}

	.box-6 h1 {
		font-size: 4em;
		margin-bottom: 0;
	}

	.box-6 p {
		margin: 0 0 1em;
	}

	.box-7 .content-wrapper {
		justify-content: center;
	}

	.box-7 h2, .box-8 h2 {
		font-size: 3em;
	}

	.box-7 img {
		margin: 0;
	}

	.box-8 img {
		margin: 0;
	}

}