/*https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1*/

div {
  width: 100px;
  height: 100px;
  background: lightgray;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



.menu-container {

  color: #fff;

  background-color: #5995DA;  /* Blue */

  padding: 20px 0;

  /* ... */

  display: flex;

  justify-content: center;    /* Add this */

}



.menu {

  border: 1px solid #fff;

  width: 900px;

  display: flex;

  justify-content: center;

}



.links {

  border: 1px solid #fff;  /* For debugging */

  display: flex;

  justify-content: flex-end;

}



.login {

  margin-left: 20px;

}



.header-container {

  color: #5995DA;

  background-color: #D6E9FE;

  display: flex;

  justify-content: center;

}



.header {

  width: 1000px;

  height: 300px;

  display: flex;

  justify-content: center;

}



.header {

  /* ... */

  align-items: stretch;    /* Change this */

}



.social,

.logo,

.subscribe {

  border: 1px solid #5995DA;

}



.photo-grid-container {

  display: flex;

  justify-content: center;

}



.photo-grid {

  width: 200px;

  display: flex;

  justify-content: center;    /* Change this */

  flex-wrap: wrap;

}



.photo-grid-item {

  border: 2px solid #fff;

  width: 453px;

  height: 453px;

}



.photo-grid {

  /* ... */

  flex-wrap: center;

}



.photo-grid {

  /* ... */

  flex-direction: row;

  align-items: center;      /* Add this */

}



.photo-grid {

  width: 900px;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  flex-direction: row-reverse;  /* <--- Really freaking cool! */

  align-items: center;

}



.photo-grid {

  /* ... */

  flex-direction: row;  /* Update this */

  align-items: center;

}



.first-item {

  order: 1;

}



.last-item {

  order: -1;

}



.social,

.subscribe {

  align-self: flex-end;

  margin-bottom: 20px;

}



.footer {

  display: flex;

  justify-content: space-between;

}



.footer-item {

  border: 1px solid #fff;

  background-color: #D6E9FE;

  height: 200px;

  flex: 1;
}



.footer-one,

.footer-three {

  background-color: #5995DA;

  flex: initial;

  width: 300px;

}



.footer-three {

  flex: 2;

}



.signup {

  margin-left: auto;

}