* {
  box-sizing: border-box;
  font-family: "Cousine";
  text-align: center;
}
nav {
  display: block;
  height: 100%;
  width: 28vw;
  border-right: 0.1ex black solid;
  float: left;
  position: fixed;
  top: 0;
  left: 0;
  overflow-wrap: break-word;
}
container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  height: 100vh;
  perspective: 500px;
  margin-left: 28vw;
  justify-content: space-around;
  align-content: center;
  padding: 5%;
}
.card-div {
  margin: auto;
  width: 10vw;
  height: 16vh;
  justify-content: center;
  position: relative;
}
.card-wrapper {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 1.75em;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  transition: transform 0.8s ease-in-out;
}
.card-div.visible .front {
  transform: rotateY(-180deg);
}
.card-div.visible .back {
  transform: rotateY(0);
}
.back {
  transform: rotateY(180deg);
}
.front {
  transform: rotateY(0);
  background-color: #bcf2ea;
}
.frontface {
  position: relative;
}
.backface-img {
  position: relative;
  object-fit: cover;
  width: inherit;
  height: inherit;
  border-radius: 1.75em;
  transition: transform 0.8s ease-in-out;
}
.disableClick {
  pointer-events: none;
}
/* Stack when screen width becomes 650px or less*/
@media screen and (max-width: 650px) {
  nav {
    display: inline-block;
    position: relative;
    float: none;
    border: none;
    top: 0;
    left: 0;
  }
  container {
    margin-left: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
  }
  .card-wrapper {
    width: 6em;
    height: 6em;
  }
}