.img-full-width {
    margin-bottom: 0 !important;
}

.img-full-width * {
    width: 100% !important;
    margin-bottom: 0 !important;
}

.img-full-width .vc_single_image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.img-full-width .vc_single_image-wrapper {
    aspect-ratio: 16/9;
}
/* .copy-image-fill row: the image fills its column and the text column sets the row height */
.copy-image-fill .vc_column_container:has(.wpb_single_image) > .vc_column-inner {
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.copy-image-fill .vc_column_container:has(.wpb_single_image) :is(.wpb_wrapper, .wpb_single_image, .vc_figure, .vc_single_image-wrapper) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 0;
}

.copy-image-fill .vc_single_image-wrapper {
    position: relative;
    min-height: 300px;
}

.copy-image-fill .vc_single_image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add alongside .copy-image-fill when the copy is short: padding on the text column makes the row (and image) taller, and the copy is vertically centered */
.copy-image-fill.copy-image-fill-centered .vc_column_container:not(:has(.wpb_single_image)) > .vc_column-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-top: var(--space-2xl) !important;
    padding-bottom: var(--space-2xl) !important;
}

/* Stacked columns (WPBakery stacks below 768px): the image becomes a 1:1 square */
@media (max-width: 767px) {
    .copy-image-fill .vc_single_image-wrapper {
        aspect-ratio: 1 / 1;
        min-height: 0;
        flex: 0 0 auto;
    }
}