.phone {

    position: relative;

    width: 300px;

    aspect-ratio: 9 / 19.5;

    filter: drop-shadow(0 50px 60px rgba(0,0,0,.35));

    animation: float 8s ease-in-out infinite;

}

.phone-frame {

    position: relative;

    width: 100%;

    height: 100%;

    padding: 10px;

    border-radius: 54px;

    background: linear-gradient(
        145deg,
        #5a5a5a,
        #1d1d1d
    );

    box-shadow:
        0 40px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.25);

}

.phone-screen {

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 44px;

    background: black;

}

.phone-screen img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.dynamic-island {

    position: absolute;

    top: 14px;

    left: 50%;

    transform: translateX(-50%);

    width: 122px;

    height: 34px;

    border-radius: 999px;

    background: #000;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    padding-right: 16px;

    z-index: 20;

}

.phone-reflection {

    position: absolute;

    inset: 0;

    border-radius: 54px;

    pointer-events: none;

    background: linear-gradient(
        120deg,
        rgba(255,255,255,.18),
        transparent 28%,
        transparent 72%,
        rgba(255,255,255,.08)
    );

    mix-blend-mode: screen;

}

.device {

    position: relative;

    width: 300px;
    aspect-ratio: 9 / 19.5;

    perspective: 1200px;

}
.device--iphone {

    width: 300px;

    aspect-ratio: 9 / 19.5;

}

.device-frame {

    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transition:
        transform 250ms cubic-bezier(.22,.61,.36,1);

}

.device-screen {

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 44px;

    background: black;

}
.device-screen img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}
.camera {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            #333,

            #111

        );

}

.device-reflection {

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:

        linear-gradient(
            130deg,
            rgba(255,255,255,.22),
            transparent 25%,
            transparent 70%,
            rgba(255,255,255,.08)
        );

    opacity: .6;

    transition:
        transform 250ms cubic-bezier(.22,.61,.36,1);

}

.device::before {

    content: "";

    position: absolute;

    left: -3px;

    top: 90px;

    width: 3px;

    height: 42px;

    background: #666;

    border-radius: 3px;

}

.device::after {

    content: "";

    position: absolute;

    right: -3px;

    top: 120px;

    width: 3px;

    height: 70px;

    background: #666;

    border-radius: 3px;

}
.device-float {

    animation: float 8s ease-in-out infinite;

}