.pieces {
	width: 100%; /* make the size of container to be same ratio like image; will be reset dynamically */
	height: 100vh;  /* will be reset dynamically */
	margin: auto;
	flex: none;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	background-size: 100% auto !important;
	background-repeat: no-repeat !important;
	background-position: 0 0 !important;
}

.piece {
	pointer-events: none;
}

/* Media query */
@media screen and (max-aspect-ratio: 597/916) {
	.pieces {
		width: 80vw;
		height: 122.75vw;
	}
	.pieces {
	
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	
}
section.slider-home {
    /*padding-top: 23%;*/
}

.pieces2 {
    width: 100%;
    height: 100vh;
    margin: auto;
    flex: none;
    position: relative;
    display: block;
    flex-wrap: wrap;
    background-size: 100% auto;
    background-repeat: repeat !important;
    background-position: 0 0;
     /*background-color: #000 !important;*/
    background: url(../img/1920x1080/intro1.jpg) !important;

}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
.pieces {
  
    background-repeat: repeat !important;
    
}
}

@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) { 
	.pieces2 {
    width: 100% !important;
    height: 100vh !important;
    margin: auto;
    flex: none;
    position: relative;
    display: block;
    flex-wrap: wrap;
    background-size: 100% auto;
    background-repeat: repeat !important;
    background-position: 0 0;
     /*background-color: #000 !important;*/
    background: url(../img/1920x1080/intro1.jpg) !important;

}
}