.auf-background-block 
{

}

.auf-canvas 
{
    display: grid;
    grid-template-areas: 'auf-canvas';
}

.auf-canvas__background-layer 
{
    display: grid; /* This is needed to position fixed sized images */
    grid-area: auf-canvas;
    z-index: +0;   /* This is needed to stack multiple backgrounds in correct order */
    grid-template-areas: 'auf-canvas__background-layer';
}

.auf-canvas__foreground-layer 
{
    grid-area: auf-canvas;
    z-index: +1;
}

.auf-canvas--checker-pattern 
{
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Preview */

.auf-canvas--preview__content 
{
    
    background-color: white;
    padding: 0.5rem 1rem;
    margin: 1rem;
    display: inline-block;
    border-radius: 0.25rem;
}

.auf-canvas--preview__content > * 
{
    font-size: 1rem;
    margin: 0;
    padding: 0;
}


/* BACKGROUND-LAYER: VIDEO */
.background-layer--video .video-container {
    display: flex;
}
.background-layer--video .video-container[data-position-x="left"]   { justify-content: flex-start; }
.background-layer--video .video-container[data-position-x="center"] { justify-content: center;     }
.background-layer--video .video-container[data-position-x="right"]  { justify-content: flex-end;   }
.background-layer--video .video-container[data-position-y="top"]    { align-items: flex-start; }
.background-layer--video .video-container[data-position-y="center"] { align-items: center;     }
.background-layer--video .video-container[data-position-y="bottom"] { align-items: flex-end;   }
.background-layer--video video {
    width: 100%;
}