.wall {
    width: 250px;
    height: 290px;
    min-width: 250px;
    max-height: 290px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
}

.window-span {
    width: 100%;
    height: 100%;
    background-image: url(../../img/preview/frame.png); /* 330 x 416 */
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.shade-container {
    position: relative;
    top: 19px;
    left:18px;
    width: calc(100% - 40px);
    height: calc(100% - 35px);
    transform-origin: left;
    background-image: url(../../img/preview/test.png); /* 282 x 359 */
    background-position: center center;
    background-size: auto;
    background-repeat: no-repeat;
}

.preview-img {
    width: 228px;
    height: 284px;
    border-radius: 10px;
    background-image: url(../../img/preview/test.png); /* 282 x 359 */
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
}

/* add opacity selection for screens and blackout. 365px; */
.shade-animate {
    animation: shade-animation 3s ease-in-out 4 alternate;
}

@keyframes shade-animation {
    0% {
        height: calc(100% - 35px);
    }

    100% {
        height: 0px;
    }
}