.preview-container{

    display:flex;
    justify-content:center;
    align-items:center;

}

.preview-phone{

    position:relative;

    width:360px;

    aspect-ratio:9 / 16;

    background:#111;

    border-radius:18px;

    overflow:hidden;

    border:2px solid #2d2d2d;

    box-shadow:0 10px 40px rgba(0,0,0,.45);

}


#layer-background{

    position:absolute;

    inset:0;

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

    filter:grayscale(100%);
        animation:backgroundZoom 10s ease-in-out infinite alternate;


}


#layer-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.70);

}


#layer-title{

    position:absolute;

    left:40px;
    right:40px;
    bottom:120px;

    color:white;

    font-size:52px;

    font-weight:800;

    text-transform:uppercase;

    line-height:1.1;

    opacity:0;
    transform:translateY(40px);

    animation:titleIn 3s cubic-bezier(.16,1,.3,1) forwards;

}


#layer-title::after{

    content:"";

    display:block;

    width:0;
    height:0;

    margin-top:-25px;

    border-top:18px solid transparent;
    border-bottom:8px solid transparent;
    border-left:260px solid #D72638;

}

@keyframes titleIn{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes backgroundZoom {

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.12);
    }

}