/* Content With Image */
.ci-block {
    --ci-bg: #f8f4eb;
    --ci-text: #292929;
    background-color: var(--ci-bg);
    color: var(--ci-text);
}

/* Inverted colour scheme */
.ci-block--invert {
    --ci-bg: #292929;
    --ci-text: #f8f4eb;
}

.ci-block__row {
    position: relative;
}

/* Image: mobile = full-width band on top */
.ci-block__media {
    position: relative;
    width: 100%;
    height: 350px;
}

.ci-block__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content: narrower, centred container, with breathing room */
.ci-block__container {
    max-width: 1200px;
}

.ci-block__inner {
    margin: 3rem 1.5rem;
}

/* Desktop: image bleeds to the window edge, 50% wide, on the chosen side;
   content sits in the opposite half of the centred container, vertically centred. */
@media (min-width: 768px) {
    .ci-block__media {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
        height: auto;
    }
    .ci-block__media--left {
        left: 0;
    }
    .ci-block__media--right {
        right: 0;
    }

    .ci-block__col {
        display: flex;
        align-items: center;
    }
    .ci-block__inner {
        margin: 5rem 1.5rem;
    }
}