* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  margin: 0;
}

header {
  padding: 40px;
  text-align: center;
  background: #13293d;
  color: #fff;
}

/* 
What happens when we set the display property to flex?
The flex container becomes flexible 
*/
nav {
  display: flex;
  background-color: #d8a47f;
}

nav a {
  color: #13293d;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* 
What is the flex-wrap property?
It specifies whether the flex items should wrap or not 
*/
main {
  display: flex;
  flex-wrap: wrap;
}

aside {
  flex: 1;
  background-color: #b9c6ae;
  padding: 80px;
  text-align: center;
}

footer {
  padding: 20px;
  text-align: center;
  background: #13293d;
  color: #fff;
}

/* 
What does the justify-content property do?
It is used to align the flex items; in our case, the product cards 
*/
.products {
  flex: 4;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* 
What is the flex property a shorthand property for?
It is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties 
What is it doing here?
We are making the product card not growable, not shrinkable, and with an initial length of 400px 
*/
.card {
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  padding: 10px;
  flex: 0 0 400px;
}

.card header {
  padding: 20px;
}

.card p {
  text-align: center;
}

.card img {
  width: 100%;
}

/* 
What does the flex-direction property define?
It defines in which direction the container wants to stack the flex items
What is it doing here? 
We are telling the main body and navbar to stack vertically in a column
*/
@media screen and (max-width: 768px) {
  main,
  nav {
    flex-direction: column;
  }
}