lista-piezas{
	background:black;
	width:100%;
	max-width:20rem;
	aspect-ratio:1 / 1;
	margin:auto;
	position:relative;
	
	pieza-puzle{
		background:url(img/tortugas.jpg);
		width:calc(100% / 3);
		height:calc(100% / 3);
		display:block;
		position:absolute;
		background-size:300%;
		scale:0.98;
		transition:top 0.2s, left 0.2s;
		cursor:pointer;
		
		&[x-actual="1"]{left:0;}
		&[x-actual="2"]{left:calc(100% / 3);}
		&[x-actual="3"]{left:calc(200% / 3);}
		
		&[y-actual="1"]{top:0;}
		&[y-actual="2"]{top:calc(100% / 3);}
		&[y-actual="3"]{top:calc(200% / 3);}
		
		&[x-correcta="1"]{background-position-x:0;}
		&[x-correcta="2"]{background-position-x:50%;}
		&[x-correcta="3"]{background-position-x:100%;}
		
		&[y-correcta="1"]{background-position-y:0;}
		&[y-correcta="2"]{background-position-y:50%;}
		&[y-correcta="3"]{background-position-y:100%;}
		
		&.hueco{
			opacity:0;
			pointer-events:none;
		}
		
		&.cogida{
			transition:none;
			z-index:10;
		}
	}
	
	&[puzle-completado]{
		pointer-events:none;
		
		pieza-puzle{
			scale:1;
			transition:top 0.2s, left 0.2s, scale 0.4s;
			
			&.hueco{
				opacity:1;
				transition:opacity 0.5s;
			}
		}
	}
}