.djwb--text-image-block {
    display: flex;
    flex-direction: column;
}

.djwb--text-image-block__item {
    align-items: center;
    display: flex;
}
.djwb--text-image-block__item.djwb--text-image-block__item--img-right {
    flex-direction: row-reverse;
}

.djwb--text-image-block__image,
.djwb--text-image-block__content {
    width: 50%;
}

.djwb--text-image-block__image img {
    height: 100%;
    max-height: 80vh;
    object-fit: cover;
    width: 100%;
}

.djwb--text-image-block__content-wrap {
    margin-right: auto;
    margin-left: 0;
    max-width: calc( calc( var(--cont-w-d) - var(--sect-side-pad)) / 2 );
    padding-left: var(--spac-x-5);
    padding-right: var(--spac-x-1);
}
.djwb--text-image-block__item--img-right .djwb--text-image-block__content-wrap {
    margin-right: 0;
    margin-left: auto;
    padding-left: 0;
    padding-right: var(--spac-x-5);
}
.djwb--text-image-block--full-width .djwb--text-image-block__content-wrap {
    max-width: calc( var(--cont-w-d) / 2 );
    padding-left: var(--sect-side-pad);
}

.djwb--text-image-block__content-wrap .djwb--text-image-block__headline {
    margin-bottom: var(--spac-x-2-5);
}

.djwb--text-image-block__text {
    padding-left: var(--inset-text);
}
.djwb--text-image-block__text p,
.djwb--text-image-block__text ol li,
.djwb--text-image-block__text ul li {
    font-size: var(--fs-head-body-l);
}

@media (max-width: 1023px) {
    .djwb--text-image-block__item,
    .djwb--text-image-block__item.djwb--text-image-block__item--img-right {
        flex-direction: column;
        row-gap: var(--spac-x-2);
    }

    .djwb--text-image-block__image,
    .djwb--text-image-block__content {
        width: 75%;
    }

    .djwb--text-image-block__content-wrap,
    .djwb--text-image-block__item--img-right .djwb--text-image-block__content-wrap {
        padding-left: var(--sect-side-pad);
        padding-right: var(--sect-side-pad);
    }

    .djwb--text-image-block__content-wrap .djwb--text-image-block__headline {
        margin-bottom: var(--spac-x-2);
    }
}

@media (max-width: 768px) {
    .djwb--text-image-block {
        row-gap: var(--spac-x-4)!important;
    }

    .djwb--text-image-block__item,
    .djwb--text-image-block__item.djwb--text-image-block__item--img-right {
        row-gap: var(--spac-x-1-5);
    }
    
    .djwb--text-image-block__image,
    .djwb--text-image-block__content {
        padding-inline: var(--sect-side-pad);
        width: 100%;
    }

    .djwb--text-image-block--contained-width .djwb--text-image-block__image,
    .djwb--text-image-block--contained-width .djwb--text-image-block__content  {
        padding-inline: 0;
    }

    .djwb--text-image-block__content-wrap,
    .djwb--text-image-block__item--img-right .djwb--text-image-block__content-wrap {
        padding-inline: 0;
    }

    .djwb--text-image-block--full-width .djwb--text-image-block__content-wrap {
        padding-left: 0;
    }

    .djwb--text-image-block__content-wrap .djwb--text-image-block__headline {
        margin-bottom: var(--spac-x-1-5);
    }
}

/* Dark Mode */
.djwb--text-image-block--dark-bg h1,
.djwb--text-image-block--dark-bg h2,
.djwb--text-image-block--dark-bg h3,
.djwb--text-image-block--dark-bg h4,
.djwb--text-image-block--dark-bg h5,
.djwb--text-image-block--dark-bg h6,
.djwb--text-image-block--dark-bg .gb-headline-xxl,
.djwb--text-image-block--dark-bg .gb-headline-xl,
.djwb--text-image-block--dark-bg .gb-headline-h1,
.djwb--text-image-block--dark-bg .gb-headline-h2,
.djwb--text-image-block--dark-bg .gb-headline-h3,
.djwb--text-image-block--dark-bg .gb-headline-h4,
.djwb--text-image-block--dark-bg .gb-headline-h5,
.djwb--text-image-block--dark-bg .gb-headline-h6,
.djwb--text-image-block--dark-bg .gb-headline-s,
.djwb--text-image-block--dark-bg .gb-headline-pre {
    color: var(--surface-50);
}

.djwb--text-image-block--dark-bg p,
.djwb--text-image-block--dark-bg ol,
.djwb--text-image-block--dark-bg li,
.djwb--text-image-block--dark-bg .gb-headline-body-xxl,
.djwb--text-image-block--dark-bg .gb-headline-body-xl,
.djwb--text-image-block--dark-bg .gb-headline-body-l,
.djwb--text-image-block--dark-bg .gb-headline-body-d,
.djwb--text-image-block--dark-bg .gb-headline-body-s,
.djwb--text-image-block--dark-bg .gb-headline-body-xs {
    color: var(--text-100);
}