img {
  --s: 300px; /* the image size */
  width: var(--s);
  aspect-ratio: 1;
  box-sizing: border-box;
  padding-inline: calc(var(--s)/10) 0;
  object-fit: cover;
  border-radius: 20px;
  transform: perspective(350px) rotateY(calc(var(--_i,1)*10deg));
  transition: .5s;
  cursor: pointer;
  background: url(https://picsum.photos/id/776/400/500) 50%/cover; 
}
img:hover {
  --_i: -1;
  padding-inline: 0 calc(var(--s)/10);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #C7F464;
}html,* { font-family: 'Inter'; box-sizing: border-box; }
body { line-height:1.6;}
.lead { font-size: 1.5rem; font-weight: 300;background: linear-gradient(to right, #000000 0%, #000000 50%,#999999 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color:transparent; }
.container { margin: 20px auto; max-width: 960px; }
h1 {
  background: linear-gradient( 120deg, #bd34fe 30%, #41d1ff );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}