/* 
////// Flexbox challenge #4 ///////
*/

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

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  /* font-size: 1.3rem; */
}

img {
  max-width: 100%;
}

.container {
  /*
  width: 80%;
  max-width: 1128px;
  */
  width: min(1128px, 80%);
  margin: 0 auto;
}

.row {
  display: flex;
  justify-content: space-between;
}

.col {
  /* these are now flex items */
  width: 100%;
  align-self: start;
}

.col + .col {
  margin-left: 3em;
}

.hero {
  background-color: #F3EED9;
  min-height: 100vh;
  text-align: center;
  
	display: flex;
	align-items: center;
}

.hero__text {
}

.hero p {
	font-family: "Roboto", sans-serif;
	text-transform: uppercase;
	/* font-size: 1.125rem; */
	font-size: clamp(0.5rem, 3vw, 1.125rem);
	font-weight: 100;
	letter-spacing: 0.25rem;
}

.hero h1 {
	font-family: Playfair Display; 
	/* font-size: 3.75rem; */
	font-size: clamp(2rem, 5vw, 3.75rem);
	font-weight: 900;
  color: #824936;
	margin-top: 0;
}

section {
	padding: 4em 0;
}

.content-one {
  background-color: #FFF;
}

.content-one h2 {
  font-family: Playfair Display;
  font-size: 2.25rem;
  text-align: center;
  color: #824936;
}

.content-two {
  background-color: #222C2A;
  color: #FFF;
}

.content-three {
  background-color: #824936;
  color: #FFF;
}

.content-two h2, .content-three h2 {
  font-family: Playfair Display;
  font-size: 2.25rem;
  color: #F3EED9;
  margin-top: 0;
}


/* Set the size of the div element that contains the map */
#map {
  height: 200px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

@media (max-width:700px) {
	.row {
		display: block;
	}
	.col + .col {
		margin: 0;
	}

}