body {
  margin: 0;
  overflow: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  height: 1900px;
  overflow: hidden;
  width: 100%;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(70%, #fff), to(rgba(255, 255, 255, 0.7)));
  background: -o-linear-gradient(bottom, #fff 70%, rgba(255, 255, 255, 0.7));
  background: linear-gradient(0deg, #fff 70%, rgba(255, 255, 255, 0.7));
  z-index: -1;
}
.drawers-wrapper {
  max-width: 850px;
  margin: 3em auto 7em;
  padding: 0 1em;
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  width: 100%;
  grid-gap: 18px;
  min-height: 150px;
  -webkit-transform: scale(0.92);
  -ms-transform: scale(0.92);
  transform: scale(0.92);
}
.drawers {
  margin: 3em 0;
}
.drawer {
  height: 290px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  -webkit-transition: 0.6s ease;
  -o-transition: 0.6s ease;
  transition: 0.6s ease;
  text-align: center;
  -webkit-transition: 0.25s ease;
  -o-transition: 0.25s ease;
  transition: 0.25s ease;
}
.drawer-btn {
  -webkit-transition: 0.25s ease;
  -o-transition: 0.25s ease;
  transition: 0.25s ease;
  display: block;
  width: fit-content;
  margin: 0 auto;
}
.modal .modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
}
.modal .modal-title {
  width: 100%;
}
.modal .modal-header .close {
  padding: 0 0.5em;
}
.drawer-btn:hover {
  -webkit-transform: scale(1.015);
  -ms-transform: scale(1.015);
  transform: scale(1.015);
}
.drawer:hover .drawer-badge span:nth-child(1) {
  -webkit-transform: translate(-50%, -5em);
  -ms-transform: translate(-50%, -5em);
  transform: translate(-50%, -5em);
}
.drawer:hover .drawer-badge span:nth-child(2) {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.drawer-badge {
  position: absolute;
  top: 85px;
  left: 115px;
  width: 175px;
  height: 45px;
  overflow: hidden;
}
.drawer-badge span {
  color: #000;
  font-family: "Special Elite", cursive;
  -webkit-transition: 0.5s cubic-bezier(0.5, -1, 0.45, 1.45);
  -o-transition: 0.5s cubic-bezier(0.5, -1, 0.45, 1.45);
  transition: 0.5s cubic-bezier(0.5, -1, 0.45, 1.45);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
}
.drawer-badge span:nth-child(1) {
  font-size: 1.8rem;
  font-weight: 600;
}
.drawer-badge span:nth-child(2) {
  font-size: 1.41rem;
  font-weight: 400;
  -webkit-transform: translate(-50%, 5em);
  -ms-transform: translate(-50%, 5em);
  transform: translate(-50%, 5em);
}
.scrollable {
  max-height: 300px;
  overflow-y: scroll;
}