.image_divider {
    min-height: 5rem;
    position: relative;
    max-width: var(--page_width);
    margin: 0 auto;
}

.image_divider_background {
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    overflow: hidden;
}

.image_divider_background img,
.image_divider_background video {
    width: 100%;
    height: auto;
    display: block;
}

.image_divider_background a img {
    transition: transform 0.25s;
    transform: scale(1);
}

.image_divider_background a:hover img,
.image_divider_background a:focus img {
    transform: scale(1.1);
}

.image_divider_background img.reduce_image_opacity,
.image_divider_background video.reduce_image_opacity {
    opacity: 0.25;
}

.image_divider_content {
    display: block;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    padding: 2rem 7%;
    pointer-events: none;
}

.image_divider_content img {
    display: block;
    height: 100%;
    object-fit: contain;
    pointer-events: visible;
    transform: scale(1);
    transition: transform 0.25s;
}

a.image_divider_content img:hover,
a.image_divider_content:focus img {
    transform: scale(1.1);
}

.image_divider_text {
    display: flex;
    position: absolute;
    top: 0;
    padding: 2rem 7%;
    height: 100%;
    width: 100%;
}

.image_divider_textbox {
    max-height: 100%;
    overflow-y: auto;
}

.image_divider.image_foreground.image_divider_content {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    width: 100%;
    height: 100%;
    padding: 7%;
}

.foreground_image {
    min-height: 20rem;
}

/* text positions */

.text_h_center {
    left: 50%;
    transform: translateX(-50%);
}

.text_right {
    margin-left: auto;
    padding-left: 1rem;
}

.text_left {
    margin-right: auto;
    padding-right: 1rem;
}

.text_v_center {
    top: 50%;
    transform: translateY(-50%);
    align-content: center;
}

.text_h_center.text_v_center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text_top {
    top: 0;
    align-content: flex-start;
}

.text_bottom {
    bottom: 0;
    align-content: flex-end;
}

.text_width_100 {
    width: 100%;
}

.text_width_75 {
    width: 75%;
}

.text_width_50 {
    width: 50%;
}

.text_width_25 {
    width: 25%;
}

.image_divider .image_right {
    padding-left: 1rem;
}

.image_divider .image_left {
    padding-right: 1rem;
}

@container (max-width: 36rem) {
/*
    .image_divider_background {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
    }

    .image_divider_background img,
    .image_divider_background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
*/
    .image_divider {
        margin: unset;
    }

    .image_divider img {
        height: auto;
    }

    .image_divider_background {
        height: auto;
    }

    .foreground_image {
        height: auto;
    }

    .image_divider_content {
        display: block;
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        width: 100%;
        height: auto;
        padding: 2rem 7%;
    }

    .image_divider_text {
        position: relative;
        top: unset;
        padding: 2rem 7%;
        height: auto;
    }

    .image_divider_textbox * {
        text-align: center;
    }

    .image_divider .image_h_center {
        object-position: center;
        margin-left: auto;
        margin-right: auto;
    }

    .image_divider .image_right {
        object-position: center;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
    }

    .image_divider .image_left {
        object-position: center;
        margin-left: auto;
        margin-right: auto;
        padding-right: 0;
    }

    .image_divider .image_width_75 {
        width: 20rem;
        min-width: 75%;
        max-width: 100%;
    }

    .image_divider .image_width_50 {
        width: 20rem;
        min-width: 50%;
        max-width: 100%;
    }

    .image_divider .image_width_25 {
        width: 20rem;
        min-width: 25%;
        max-width: 100%;
    }

    .text_h_center {
        margin-left: auto;
        margin-right: auto;
    }

    .text_right {
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
    }

    .text_left {
        margin-left: auto;
        margin-right: auto;
        padding-right: 0;
    }

    .text_width_75 {
        width: 20rem;
        max-width: 100%;
        min-width: 75%;
    }

    .text_width_50 {
        width: 20rem;
        max-width: 100%;
        min-width: 50%;
    }

    .text_width_25 {
        min-width: 25%;
        width: 20rem;
        max-width: 100%;
    }

    .text_v_center {
        top: unset;
        transform: unset;
    }

    .text_h_center.text_v_center {
        top: unset;
        left: unset;
        transform: unset;
    }

    .text_top {
        top: unset;
    }

    .text_bottom {
        bottom: unset;
    }
}