body{
    
    height:100%;
    margin:0;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

:root{
    
    --transition: cubic-bezier(0.65, 0.05, 0, 1);
  }

img{
  position:absolute;
  width:100%;
  height:100%;
  overflow: hidden;
  object-fit: cover;
  border-radius: 3vw;
}

.social{
    position: relative;
    padding:24px;
    display: flex;
    max-width: 80rem;
    width: 100%;
    height:36rem;
    padding: 24px;
    align-items: center;
    justify-content: center;
    perspective: 800px;
    transform-style: preserve-3d;
   
}

.card:nth-child(n){
  position: absolute;
    width:20%;
    aspect-ratio:20/35;
    background:#000;
    border-radius:3vw;
   
}  


  .card:nth-child(5){
    --x:8vw;
    --y:12px;
    --rotate:7deg;
    --scale:0.93;
    
    transform:translate(var(--x), var(--y)) rotate(var(--rotate)) scale(var(--scale));
    z-index:3;
  }

  .card:nth-child(3){
    --x:-8vw;
    --y:12px;
    --rotate:-7deg;
    --scale:0.93;
    transform:translate(var(--x), var(--y)) rotate(var(--rotate)) scale(var(--scale));
    z-index:3;
  }

  .card:nth-child(2){
    --x:-16vw;
    --y:40px;
    --rotate:-14deg;
    --scale:0.84;
    transform:translate(var(--x), var(--y)) rotate(var(--rotate)) scale(var(--scale));
    z-index:2;
  }

  .card:nth-child(6){
    --x:16vw;
    --y:40px;
    --rotate:14deg;
    --scale:0.84;
    transform:translate(var(--x), var(--y)) rotate(var(--rotate)) scale(var(--scale));
    z-index:2;
  }

  .card:nth-child(1){
    --x:-22vw;
    --y:84px;
    --rotate:-21deg;
    --scale:0.78;
    transform:translate(var(--x), var(--y)) rotate(var(--rotate)) scale(var(--scale));
    z-index:1;
    transform-origin: 50% 50%;
  }

  .card:nth-child(7){
    --x:22vw;
    --y:84px;
    --rotate:21deg;
    --scale:0.78;
    transform:translate(var(--x), var(--y)) rotate(var(--rotate)) scale(var(--scale));
    z-index:1;
    transform-origin: 50% 50%;
  }

  .card:nth-child(4){
    --x:0vw;
    --y:-14px;
    --rotate:0deg;
    --scale:1.08;
    z-index:10;
    transform:translate(var(--x), var(--y)) ;

    &:hover{
      transform: translate(0, -60px) rotate(0deg) scale(var(--scale)) ;
      z-index: 20 ;
      transition: 0.1s var(--transition);
    }
   
   
  }

  .card:nth-child(n):hover ~ .card{
    transform: translate(calc(var(--x) + 4vw ), var(--y)) 
                 rotate(calc(1.2*var(--rotate))) scale(var(--scale)) ;
      transition: transform 0.45s ease;
    
  }

  

    .social:has(.card:hover) .card:not(:hover):not(.card:hover ~ .card) {
      transform: translate(calc(var(--x) - 4vw ) , var(--y))
                 rotate(calc(1.2*var(--rotate))) scale(var(--scale))  ;
      transition: transform 0.2s linear;
    }