.overlay-container{
    z-index: 1000;
    pointer-events: none;
    > div{
        pointer-events: auto;
    }
}
.container-self-center {
    position: absolute;
    height: 100%;
    width: 100%;
}
.overlay-container-centered {
    display: flex;
    align-items: center;
}
.overlay-container > [class*=col-]{
    padding: 0;
}

.container-x-center{
    transform: translate(-50%,0);
    left:50%;
    position: absolute;
}
.container-xy-center{
    transform: translate(-50%,-50%);
    left:50%;
    top: 50%;
    position: absolute;
    z-index: 9000;
    pointer-events: none;
    .price-large{
        pointer-events: auto;
    }
}

.text-over-image{
    position: relative;
    .entry-image{
        display: block;
    }
    .entry-header{
        position: absolute;
        bottom: 25px;
        left: 25px;
        right: 30px;
        z-index: 10;
    }
}
.text-over-image.text-over-image-large{
    .entry-header{
        bottom: 50px;
        left: 50px;
        right: 40px;
    }    
}
.text-over-image-center{
    .entry-header{
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left:50%;
        z-index: 10;
        bottom: auto;
        right: auto;
    }
}
.text-over-image-bottom-left{
    .entry-header{
        position: absolute;
        top: auto;
        left:50px;
        z-index: 10;
        bottom: 50px;
        right: auto;
        max-width: size-by-col(6, 'xl');
        text-align: left;
    }    
}

// Left bottom text over image sizes
.col-12{
    .text-over-image-bottom-left{
        .entry-header{
            max-width: size-by-col(6, 'xl');   
        }
    }
}
.col-6{
    .text-over-image-bottom-left{
        .entry-header{
            max-width: size-by-col(4, 'xl');  
            line-height: 1.2; 
            left: 20px;
            bottom: 20px;
            @include mq('md') {
                left: 30px;
                bottom: 30px;               
            }
            @include mq('lg') {
                left: 40px;
                bottom: 40px;
            }
        }
    }
}
.col-4,
.col-3 {
    .text-over-image-bottom-left{
        .entry-header{
            max-width: size-by-col(3, 'xl');  
            line-height: 1.2; 
            left: 20px;
            bottom: 20px;
            @include mq('md') {
                left: 30px;
                bottom: 30px;               
            }
            @include mq('lg') {
                left: 30px;
                bottom: 30px;
            }
        }
    }
}