* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  display: flex;
  flex-wrap: wrap;
}

.menu {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #F7BF08;
  border: 1px solid #000;
}

.intro {
  width: 100%;
  height: 300px;
  margin-top: 80px;
  background-color: #F7BF08;
  border: 1px solid #000;
}

.content {
  width: 100%;
  height: 600px;
  background-color: #fff;
  border: 1px solid #000;
}

.feature-1,
.feature-2,
.feature-3,
.feature-4 {
  width: 100%;
  height: 300px;
  background-color: #fff;
  border: 1px solid #000;
  /*
  display: flex;
  justify-content: center;
  align-items: center;
  */
}

.footer {
  width: 100%;
  height: 400px;
  background-color: #ccc;
  border: 1px solid #000;
}



/* Mobile Styles */
@media only screen and (max-width: 400px) {
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  .feature-1,
  .feature-2,
  .feature-3,
  .feature-4 {
    width: 50%;
  }
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
  .page {
    width: 960px;
    margin: 0 auto;
  }
  .desktop_width {
    width: 960px;
    margin: 0 auto;
  }
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 33.3%;
  }
  .intro {
    height: 400px;
  }

  /* reorder
  .feature-1 {
  height: 200px;
  order: 1;
  }
  .content {
    order: 2;
  }
  */
}