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

body {
  background: #000;
}

section {
  width: 100%;
  min-height: 100px;
  > .book {
    width: 200px;
    height: 300px;
    /* border: 1px solid white; */
    margin: 200px auto;
    position: relative;
    transform-style: preserve-3d;
    transition: 3s;
    &:hover{
       transform: perspective(600px) rotateY(-110deg);
    }

    &::after {
      position: absolute;
      content: "";
      width: 70px;
      height: 98%;
      right: 3%;
      top: 1%;
      background-image: linear-gradient(
        90deg,
        #fff 0%,
        #f9f9f9 5%,
        #fff 10%,
        #f9f9f9 15%,
        #fff 20%,
        #f9f9f9 25%,
        #fff 30%,
        #f9f9f9 35%,
        #fff 40%,
        #f9f9f9 45%,
        #fff 50%,
        #f9f9f9 55%,
        #fff 60%,
        #f9f9f9 65%,
        #fff 70%,
        #f9f9f9 75%,
        #fff 80%,
        #f9f9f9 85%,
        #fff 90%,
        #f9f9f9 95%,
        #fff 100%
      );
      transform-origin: right;
      transform: rotateY(90deg);


    }
    &::before{
       position: absolute;
       content: '1991';
       align-items: center;
       justify-content: center;
       color: white;
       font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
       font-weight: 900;
       width: 70px;
       height: 100%;
       background-color: #2d4990;
       left: 0;
       top: 0;
       display: flex;
       transform-origin: left;
       transform: rotateY(-90deg);

    }


    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-position: center;
      background-size: cover;
      box-shadow: 5px 5px 20px #666;
      &:first-of-type {
        background-image: url(images/pull-requests-code-review.jpg);
        transform: translateZ(70px);
        border-radius: 0 5px 5px 0;
        /* box-shadow: 5px 5px 20px #666; */
      }

      &:last-of-type {
        background-color: #2d4990;
        display: flex;
        align-items: center;
        transform: scaleX(-1);
                border-radius: 5px 0 0 5px;

        >figure{
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              padding: 20px;
              width: 100%;
              height: 100%;
             >figcaption{
              height: 40%;
              font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
              color: rgba(255, 255, 255, 0.646);
              font-size: 8px;
              text-align: left;
             }
             >img{
              height: 60%;
              object-fit: cover;
              width: 100%;
             }
       }
        }
      }
    }
  }