:root {  
  --bookDepth: 6vh;
  --bookRotation: 30deg;
  --bookHeight: 48vmin;
}

.book-container {
  position: relative;
  margin-left: 40px;
  margin-top: 15px;
  transform-style: preserve-3d;
  display: inline-block;
  perspective: 100vh;
}

.book-3d {
  position: relative;
  display: inline-block;
  transform: rotateY(var(--bookRotation)) rotateX(calc(var(--bookRotation)/3));
  transform-style: preserve-3d;
  height: var(--bookHeight);
}

.front,
.back {
  height: var(--bookHeight);
  overflow: hidden;
  border-radius: 0px 2vh 2vh 0px;
  border: 0px solid rgba(255, 255, 255, 0);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  transform: translateZ(calc(-1*var(--bookDepth)));
  filter: brightness(0%);
  box-shadow: 20px 0 50px 4px;
}

.front:before {
  position: absolute;
  height: 100%;
  width: 1vh;
  content: ' ';
  top: 0;
  box-shadow:
    inset 2vh 2vh 2vh -2vh rgba(255, 255, 255, .3),
    inset 2vh 2vh 2vh -2vh rgba(255, 255, 255, .3);
  margin-left: 2vh;
  z-index: 100;
}

.book-3d img {
  padding: 0;
  margin: 0;
  z-index: -1;
  max-height: 100%;
  max-width: 100%;
}

.book-3d:after {
  position: absolute;
  top: 2%;
  right: 0;
  width: var(--bookDepth);
  height: 96%;
  background-image: url('https://i.imgur.com/5XsAmZk.png');
  content: ' ';
  filter: grayscale(1) brightness(1.15);
  transform-origin: left;
  transform: translate3d(90%, 0px, -0.1vw) rotateY(90deg);
  box-shadow: inset 0 0 2vh rgba(0, 0, 0, 1.0);
  outline: 1px solid transparent;
  border-radius: 1vh;
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bookDepth);
  color: white;
  border-radius: 1px;
  height: 100%;
  background-color: black;
  transform-origin: left;
  transform: translate3d(0.5px, 0, calc(-1*var(--bookDepth))) rotateY(-90deg);
  justify-content: center;
  writing-mode: vertical-rl;
  text-align: center;
  font-size: calc(var(--bookDepth)/2.5);
  line-height: var(--bookDepth);
}

@media screen and (max-width:500px) {
  :root {  
  --bookDepth: 6vh;
  --bookRotation: 30deg;
  --bookHeight: 35vmax;
}

.book-container {
  margin-left: 0px;
  margin-bottom: 30px;
}

  .book-3d {
  transform: rotateY(0) rotateX(0);
}

}