@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #0f0430;
  font-family: "Roboto", sans-serif;
  height: 100vh;
}

.inspiration {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  color: #fff;
  position: absolute;
  transform: translateY(30%);
  bottom: 0;
}

.inspiration a {
  color: #fff;
  text-decoration: none;
}

.gallery {
  display: flex;
  height: 100%;
}

.left,
.right {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 50%;
}

.inner {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  perspective: 500px;
  transform-style: preserve-3d;
}

.item {
  position: absolute;
  width: 12rem;
  height: 14rem;
  transition: transform 300ms cubic-bezier(0, 0.55, 0.45, 1);
}

.left .inner {
  perspective-origin: right center;
}

.right .inner {
  perspective-origin: left center;
}

.left .item {
  right: -10rem;
}

.right .item {
  left: -10rem;
}

.left .item:nth-child(1) {
  transform: translate3d(-10rem, 0, -4rem);
}

.left .item:nth-child(2) {
  transform: translate3d(-20rem, 0, -8rem);
}

.left .item:nth-child(3) {
  transform: translate3d(-30rem, 0, -12rem);
}

.left .item:nth-child(4) {
  transform: translate3d(-40rem, 0, -16rem);
}

.left .item:nth-child(5) {
  transform: translate3d(-50rem, 0, -20rem);
}

.left .item:nth-child(6) {
  transform: translate3d(10rem, 0, -4rem);
}

.right .item:nth-child(1) {
  transform: translate3d(10rem, 0, -4rem);
}

.right .item:nth-child(2) {
  transform: translate3d(20rem, 0, -8rem);
}

.right .item:nth-child(3) {
  transform: translate3d(30rem, 0, -12rem);
}

.right .item:nth-child(4) {
  transform: translate3d(40rem, 0, -16rem);
}

.right .item:nth-child(5) {
  transform: translate3d(50rem, 0, -20rem);
}

.right .item:nth-child(6) {
  transform: translate3d(-10rem, 0, -4rem);
}