/*
* Single Overlap Content Card Patterns styling - used on Single Post (Advanced Post blocks)
 */

/* overlap cards */
.image-block-container {
    margin-bottom: 1rem;
    /* Use flex box with row orientation */
    display: flex;
    /* Vertically center children */
    align-items: center;
}

/* --------------------------------------------------------------
Right Overlap Text with Left Image
-------------------------------------------------------------- */
.image-block-container.right-overlap {
    width: 1520px;
    /* Use flex box with row orientation */
    flex-direction: row;
}
.right-overlap .text-block {
    transform: translateX(-100px);
    min-width: 820px;
    padding: 3rem 3rem 3rem 8rem;
}
.right-overlap img {
    min-width: 820px;
}
@media (max-width: 1720px) and (min-width: 1520px){
    .image-block-container.right-overlap {
        width: 1200px;
    }
    .right-overlap .text-block {
        transform: translateX(-50px);
        min-width: 640px;
        padding: 3rem 3rem 3rem 6rem;
    }
    .right-overlap img {
        min-width: 650px;
    }
}
@media (max-width: 1519px) and (min-width: 1375px){
    .image-block-container.right-overlap {
        width: 1000px;
    }
    .right-overlap .text-block {
        transform: translateX(-50px);
        min-width: 550px;
        padding: 3rem 3rem 3rem 6rem;
    }
    .right-overlap img {
        min-width: 530px;
    }
}
@media (max-width: 1374px) and (min-width: 992px){
    .image-block-container.right-overlap {
        width: 792px;
    }
    .right-overlap .text-block {
        transform: translateX(-50px);
        min-width: 425px;
        padding: 3rem 3rem 3rem 5rem;
    }
    .right-overlap img {
        min-width: 500px;
    }
}
@media (max-width: 992px) {
    .image-block-container.right-overlap {
        flex-direction: column;
        width: auto;
    }
    .right-overlap .text-block {
        transform: translateY(-50px);
        min-width: auto;
        padding: 6rem 3rem 3rem 3rem;

    }
    .right-overlap img {
        min-width: auto;
        width: auto;
    }
}




/* --------------------------------------------------------------
Left Overlap Text with Right Image
-------------------------------------------------------------- */
.image-block-container.left-overlap {
    width: 1520px;
    /* Use flex box with row orientation */
    flex-direction: row-reverse;
}
.left-overlap .text-block {
    transform: translateX(100px);
    min-width: 820px;
    padding: 3rem 8rem 3rem 3rem;
}
.left-overlap img {
    min-width: 820px;
}
@media (max-width: 1720px) and (min-width: 1520px){
    .image-block-container.left-overlap {
        width: 1200px;
    }
    .left-overlap .text-block {
        transform: translateX(50px);
        min-width: 640px;
        padding: 3rem 6rem 3rem 3rem;
    }
    .left-overlap img {
        min-width: 650px;
    }
}
@media (max-width: 1519px) and (min-width: 1375px){
    .image-block-container.left-overlap {
        width: 1000px;
    }
    .left-overlap .text-block {
        transform: translateX(50px);
        min-width: 550px;
        padding: 3rem 6rem 3rem 3rem;
    }
    .left-overlap img {
        min-width: 530px;
    }
}
@media (max-width: 1374px) and (min-width: 992px){
    .image-block-container.left-overlap {
        width: 792px;
    }
    .left-overlap .text-block {
        transform: translateX(50px);
        min-width: 425px;
        padding: 3rem 5rem 3rem 3rem;
    }
    .left-overlap img {
        min-width: 500px;
    }
}
@media (max-width: 992px) {
    .image-block-container.left-overlap {
        flex-direction: column;
        width: auto;
    }
    .left-overlap .text-block {
        transform: translateY(-50px);
        min-width: auto;
        padding: 6rem 3rem 3rem 3rem;

    }
    .left-overlap img {
        min-width: auto;
        width: auto;
    }
}