#previewWrapper {
    width:100%;
    aspect-ratio:2;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}

@property --boxshadow-drift {
	syntax: '<length>';
	initial-value: 5px;
	inherits: true;
}

@property --boxshadow-tint {
	syntax: '<color>';
	initial-value: #ff0000;
	inherits: true;
}

#previewWrapper #previewInner{
    --border:10px;
    --boxshadow-drift:5px;
    --boxshadow-tint:#884422;
    background: var(--thumbnail), linear-gradient(var(--boxshadow-tint),var(--boxshadow-tint));
    background-blend-mode:multiply;
    width:calc(100% - 2*var(--border));
    height:calc(100% - 2*var(--border));
    background-size:cover;
    box-shadow:calc(-2 * var(--boxshadow-drift)) calc(2 * var(--boxshadow-drift)) #321414;
    transform:translate(var(--boxshadow-drift), calc(-1 * var(--boxshadow-drift)));
    color:white;
    font-size:20px;
    user-select:none;
    text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:Sans-serif;
 
    transition: --boxshadow-drift 0.1s, color 0.1s, --boxshadow-tint 0.1s;
    /*animation:thumbnailSlide 1s;
    animation-direction:normal;
    animation-fill-mode:forwards;*/
    user-select:none;
}

a {
    text-decoration:none;
}

#previewWrapper p{
    width:100%;
    margin:20px;
}

#previewWrapper:hover #previewInner{
    --boxshadow-drift:0px;
    color:rgba(1,1,1,0);
    --boxshadow-tint:#ffffff;

    background-size:cover;
    text-shadow: 0 0 50px;
}

@media ((max-width:1000px) and (min-width:600px)) or (max-device-aspect-ratio:2/3){
    #previewWrapper{
        aspect-ratio:4;
        justify-content: left;
    }
    #previewWrapper #previewInner{
        width:calc(50% - 2*var(--border));
        --boxshadow-tint:#ffffff;
    }
    #previewInner{
        color:black;
        transform:translateX(100%);
    }
    #previewInner p{
        color:black;
        transform:translateX(calc(100% + 20px));
        margin:10px;
    }
}

@media (max-device-aspect-ratio:2/3){
    #previewWrapper p{
        font-size:30px;        
    }
}