.phone-container {
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    @media screen and (min-width: 992px) {
        /* left: -64px; */
        top: -16px;
    }
}
.phone {
    position: absolute;
    width: 240px;
    height: 470px;
    background: #333;
    border-radius: 25px;
    box-shadow: 0 32px 35px rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}
.phone:before {
    content: "";
    position: absolute;
    width: 95%;
    height: 96%;
    background: #111;
    border-radius: 16px;
}
.phone-1 {
    background: #1d1c1a;
    transform: rotateY(25deg) translateX(-100px) translateZ(-40px)
        translateY(30px);
}
.phone-2 {
    background: #1d1c1a;
    transform: rotateY(-25deg) translateX(0px) translateZ(-40px)
        translateY(-30px);
}
.screen {
    position: absolute;
    width: 90%;
    height: 94%;
    background: #222;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    overflow: hidden;
    z-index: 2;
}
.phone-1 .screen {
    background-image: url("https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80");
}
.phone-2 .screen {
    background-image: url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80");
}
.phone:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 10%;
    width: 80%;
    height: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    filter: blur(10px);
    transform: rotateX(80deg);
}