style.css

article {
  display: flex;
  flex-wrap: wrap;
}

article > * {
  padding: 1rm;
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-family: sans-serif;
  color: black;
}

nav {
  background-color: #5995DA;
  height: 80px;
  min-height: auto;
}

header {
  background-color: #B2D6FF;
}

main {
  background-color: #EAEDF0;
  min-height: 600px;
}

#sign-up {
  background-color: #D6E9FE;
}

#feature-1 {
  background-color: #F5CF8E;
}

#feature-2 {
  background-color: #F09A9D;
}

#feature-3 {
  background-color: #C8C6FA;
}

/* Tabelet */
@media screen and (min-width: 640px) and (max-width: 999px) {

  #sign-up, #feature-1, #feature-2, #feature-3 {
    width: 50%;
    min-height: 50vw;
  }


}

/* Desktop */
@media screen and (min-width: 1000px) {
  #feature-2{
    order:1;
  }
  #sign-up {
    min-height: auto;
    padding: 2rem;
    order: 2;
  }
  main{
    order:3;
  }
  #feature-1, #feature-2, #feature-3 {
    width: calc(100%/3);
    min-height: 40vw;
  }

}