/* -------------------------------- 

💡 3D Perspective in CSS
🔗 https://codyhouse.co/nuggets/3d-perspective

-------------------------------- */

.td-figure {
 perspective: 1500px;
}

.td-figure img {
  transform: rotateX(10deg) rotateY(-18deg) rotateZ(3deg);
  border-radius: 0.375em;
  box-shadow: 2px 10px 30px hsla(0, 0%, 0%, 0.25);
  transition: .3s;
}

.td-figure:hover img {
  transform: rotate(0);
}

/* demo stuff */
body {
  padding: 4rem 0;
}

.container {
 width: calc(100% - 3rem);
  margin-left: auto;
  margin-right: auto;
 max-width: 80rem; 
 
}

.grid {
  display: grid;
 gap: 2rem;
  align-items: center;
}

.text-component {
  text-align: center;
}

.text-component h1 {
  margin-bottom: 0.75rem;
}

@media (min-width: 64rem) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .text-component {
    text-align: left;
  }
}