Thành viên:Đức Anh/Nháp 89

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

body {
  height: 100%;
  background-color: #22313F;
  font-family: 'Open Sans';
}
/********************************
Plugin Hero Example
********************************/

.patch-button {
  color: #FFF;
  cursor: pointer;
  font-size: 1em;
  font-size: 1.5em;
  letter-spacing: 0;
  line-height: 150px;
}

.patch-button:hover {
  border: solid 3px #FFF;
  line-height: 144px;
}

.patch-container {
  background-color: #2C3E50;
  border-radius: 5px;
  color: #FFF;
  margin: 4%;
  overflow: auto;
  padding: 2%;
  position: relative;
  text-align: center;
  max-width: 1000px;
}

.patch-item {
  background-color: #FFF;
  border-radius: 4px;
  float: left;
  height: 150px;
  margin: 0 0 2% 0;
  width: 100%;
}

.patch-panel {
  background-color: #FFF;
  border-radius: 4px;
  color: #FFF;
  display: none;
  float: left;
  font-size: 1.5em;
  height: 250px;
  line-height: 250px;
  margin: 0 0 2% 0;
  width: 100%;
}

[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
  background: #F5AB35;
}

[data-patch-panel='2'],
[data-patch-panel='6'],
[data-patch-panel='9'] {
  background: #00B16A;
}

[data-patch-panel='3'],
[data-patch-panel='7'],
[data-patch-panel='10'] {
  background: #E74C3C;
}

[data-patch-panel='4'],
[data-patch-panel='8'],
[data-patch-panel='12'] {
  background: #3498DB;
}
/********************************
Media Queries
********************************/

@media only screen and (min-width: 550px) {
  h2 {
    font-size: 3.3rem;
  }
  .patch-item {
    margin: 1%;
    width: 48%;
  }
  .patch-panel {
    margin: 1%;
    width: 98%;
  }
  .components {
    margin: 1.5%;
    width: 46%;
  }
}

@media only screen and (min-width: 992px) {
  .patch-container {
    margin: 4% auto;
  }
  .patch-item {
    margin: 0.6667%;
    margin: calc(4% / 6);
    width: 32%;
  }
  .patch-panel {
    margin: 0.6667%;
    margin: calc(4% / 6);
    width: 98.6666%;
    width: calc(100% - (4% / 6) * 2);
  }
  .resize {
    margin: 50px auto -2%;
  }
  .wide {
    margin: 0.6667%;
    margin: calc(4% / 6);
    width: 48.6666%;
    width: calc(50% - (4% / 6) * 2);
  }
  .thin {
    width: 23.6666%;
    width: calc(25% - (4% / 6) * 2);
  }
}