.portfolio-section {
  margin: 0;
  display: flex;
  width: 100%;
  min-height: 100dvh;
  perspective: 1000px;
  overflow: hidden;
  color: hsl(180 68% 5%);
  z-index: 1001;
}

.book {
  --c: 0;
  position: relative;
  display: flex;
  margin: auto;
  margin-top: 10vh;
  width: 26vw;
  height: 70vh;
  padding-left: 6vw;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: calc(min(var(--c), 1) * 50%) 0%;
  ;
  rotate: 1 0 0 10deg;
  counter-reset: page -1;
}

.book a {
  color: inherit;
  font-size: 2.5vw;
  display: block;
  text-decoration: none;
  text-align: center;
}

.book a:hover {
  text-decoration: underline;
}

.page {
  --thickness: 4;
  flex: none;
  display: flex;
  width: 100%;
  font-size: 2vh;
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition:
    transform 1s,
    rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ(calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * .23vh)));
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
  box-shadow: 4vw 1.2vw 1.5vw rgba(0, 0, 0, 0.2);
}

.front,
.back {
  position: relative;
  flex: none;
  width: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
  padding: 2em;
  border: 1px solid #0002;
  translate: 0px;
}

.front img,
.back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.front::after,
.back::after {
  position: absolute;
  bottom: 1em;
  counter-increment: page;
  content: counter(page) ".";
  font-size: 0.8em;
}

.cover::after {
  content: "";
}

.front::after {
  right: 1em;
}

.back::after {
  left: 1em;
}

.front {
  background: linear-gradient(to left, #f7f7f7 80%, #eee 100%);
  border-radius: .1em .5em .5em .1em;
}

.back {
  translate: -100% 0;
  rotate: 0 1 0 180deg;
  background-image: linear-gradient(to right, #f7f7f7 80%, #eee 100%);
  border-radius: .5em .1em .1em .5em;
}

.cover {
  background: radial-gradient(circle farthest-corner at 80% 20%, hsl(150 80% 20% / .3) 0%, hsl(170 60% 10% / .1) 100%),
    hsl(231, 32%, 29%);
  color: hsl(200 30% 98%);
}

.cover {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 2vw;
}

.cover img {
  filter: url(#traceFilter);
  object-fit: contain;
  object-position: center;
  width: 10vw;
  height: 10vw;
}

.cover h1 {
  font-size: 2vw;
  text-align: center;
  margin-top: 1vh;
  color: hsl(200, 30%, 98%);
}

.mobile.jumbled-cards {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  display: none;
}

.item-container.card {
  position: absolute;
  width: 54vw;
  height: 18vh;
  background: #fff;
  box-shadow: 0 0.42vh 1.67vw rgba(0, 0, 0, 0.18), 0 0.08vh 0.42vw rgba(0, 0, 0, 0.10);
  border: 0.05vw solid rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    transform 0.4s cubic-bezier(0.4, 0.2, 0.2, 1),
    left 0.4s cubic-bezier(0.4, 0.2, 0.2, 1),
    top 0.4s cubic-bezier(0.4, 0.2, 0.2, 1),
    z-index 0s;
  cursor: pointer;
  padding: 12px;
  padding-bottom: 0;
  background: #fff9f1;
}

.image-item {
  width: 100%;
  height: 75%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.image-title {
  padding: 0.73vh 0.63vw 0.52vh 0.63vw;
  font-size: 2.5vw;
  background: #fff9f1;
  text-align: center;
  min-height: 2.6vh;
  border-top: 0.05vw solid #f5e6d3;
}

.card1 {
  top: 2vh;
  left: 7vw;
  z-index: 1007;
  transform: rotate(6deg);
}

.card2 {
  top: 16vh;
  left: 37vw;
  z-index: 1006;
  transform: rotate(-4deg);
}

.card3 {
  top: 28vh;
  left: 7vw;
  z-index: 1005;
  transform: rotate(0deg);
}

.card4 {
  top: 40vh;
  left: 37vw;
  z-index: 1004;
  transform: rotate(10deg);
}

.card5 {
  top: 52vh;
  left: 7vw;
  z-index: 1003;
  transform: rotate(-6deg);
}

.card6 {
  top: 64vh;
  left: 37vw;
  z-index: 1002;
  transform: rotate(12deg);
}

.card7 {
  top: 76vh;
  left: 7vw;
  z-index: 1001;
  transform: rotate(-10deg);
}

.glasses-container {
  position: absolute;
  bottom: 0;
  left: 0;
}

.glasses-container img {
  width: 20vw;
  rotate: 10deg;
  filter: drop-shadow(-1.5vw 0.5vw 0.5vw rgba(0, 0, 0, 0.6));
}

@media screen and (max-width: 933px) {
  .book {
    width: 28vw;
    height: 50vh;
    padding-top: 10vh;
    padding-left: 12vw;
  }
}

@media (max-width: 435px) {
  .book {
    width: 40vw;
    height: 34vh;
    margin-top: 24vh;
    margin-right: 36vw;
  }

  .glasses-container {
    top: 0;
  }

  .glasses-container img {
    width: 30vw;
  }

  .cover h1 {
    font-size: 3vh;
  }

  .book a {
    font-size: 2.5vh;
  }

  .front::after,
  .back::after {
    font-size: 1.2vh;
  }

  .front,
  .back {
    padding: 1em;
  }
}

@media screen and (max-height: 431px) and (orientation: landscape) {
  .book {
    width: 28vw;
    height: 60vh;
    padding-top: 6vh;
    padding-left: 0;
  }

  .glasses-container {
    bottom: 10vw;
  }

  .glasses-container img {
    rotate: -45deg;
  }
}

.active-center {
  transition: transform 0.3s, left 0.3s, top 0.3s, z-index 0.3s;
}