iPhone + Screenshot

need a fix

by Vladimir Sobolev

HTML

<div class="iphone">
    <div class="screenshot"></div>
</div>

SCSS

.iphone {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 67.7%; // 100% / 2644px * 1790px 
    background: url(https://dl.dropbox.com/s/b5bhqt4alv9yf34/iphone2.png?dl=1) no-repeat;
    background-size: cover;
    z-index: 100;
}

.screenshot {
    position: absolute;
    background: url(https://dl.dropbox.com/s/jixmqjlpnjnyndr/tsogo-iphone%20%282%29.jpg?dl=1) 50% 0 no-repeat;
    background-size: cover;
    left: 50%;
    top: 50%;
    width: 54.4%;
    height: 0;
    padding-bottom: 96.71%; // 54.4% / 720px * 1280px
    transform-origin: 50% 50%;
    							transform: matrix3d(0.60833, -0.329086, 0, 0.000085, 
							                   0.53347, 0.375535, 0, -0.000098, 
							                   0, 0, 1, 0, 
							                   0, 0, 0, 1);
	//margin: calc(-100% / 2 - 3.8%) 0 0 calc(-100% / 2 + 21%);
	margin: -53.9% 0 0 -29.45%;
    z-index: 200;
	opacity: .8;
}