
.m3-mediaText__figure {
    margin: 0;
}
.m3-mediaText__img {
    width: 100%;
}

.m3-mediaText.matchHeight.pos-left .m3-mediaText__img,
.m3-mediaText.matchHeight.pos-right .m3-mediaText__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* valign für das Bild (nur wenn NICHT matchHeight) */
.m3-mediaText:not(.matchHeight).pos-left .m3-mediaText__mediaCol,
.m3-mediaText:not(.matchHeight).pos-right .m3-mediaText__mediaCol {
    display: flex;
}

/* oben */
.m3-mediaText:not(.matchHeight).valign-top.pos-left .m3-mediaText__mediaCol,
.m3-mediaText:not(.matchHeight).valign-top.pos-right .m3-mediaText__mediaCol {
    align-items: flex-start;
}

/* mitte */
.m3-mediaText:not(.matchHeight).valign-middle.pos-left .m3-mediaText__mediaCol,
.m3-mediaText:not(.matchHeight).valign-middle.pos-right .m3-mediaText__mediaCol {
    align-items: center;
}

/* unten */
.m3-mediaText:not(.matchHeight).valign-bottom.pos-left .m3-mediaText__mediaCol,
.m3-mediaText:not(.matchHeight).valign-bottom.pos-right .m3-mediaText__mediaCol {
    align-items: flex-end;
}

.m3-mediaText.valign-middle .m3-mediaText__textCol {
    display: flex;
    align-items: center;
}
.m3-mediaText.valign-bottom .m3-mediaText__textCol {
    display: flex;
    align-items: flex-end;
}

.m3-mediaText.pos-bottom .m3-mediaText__stack {
    display: flex;
    flex-direction: column-reverse;
}

@media screen and (min-width: 800px){
    /* optional/empfohlen, wenn valign oder align-items-start im Spiel ist */
    .m3-mediaText.pos-left .m3-mediaText__row,
    .m3-mediaText.pos-right .m3-mediaText__row,
    .m3-mediaText.pos-left .m3-mediaText__row.align-items-start,
    .m3-mediaText.pos-right .m3-mediaText__row.align-items-start {
        align-items: stretch !important;
    }

    /* CSS-only matchHeight: Bild soll NICHT die Row-Höhe bestimmen */
    .m3-mediaText.matchHeight.pos-left .m3-mediaText__mediaCol,
    .m3-mediaText.matchHeight.pos-right .m3-mediaText__mediaCol {
        position: relative;
        overflow: hidden;
        min-height: 0;
    }

    /* Bild-Wrapper füllt den Bereich OHNE Caption-Platz */
    .m3-mediaText.matchHeight.pos-left .m3-mediaText__figure,
    .m3-mediaText.matchHeight.pos-right .m3-mediaText__figure,
    .m3-mediaText.matchHeight.pos-left .m3-mediaText__mediaLink,
    .m3-mediaText.matchHeight.pos-right .m3-mediaText__mediaLink,
    .m3-mediaText.matchHeight.pos-left .m3-mediaText__picture,
    .m3-mediaText.matchHeight.pos-right .m3-mediaText__picture {
        position: absolute;
        inset: 0 calc(var(--bs-gutter-x) * .25) 0 calc(var(--bs-gutter-x) * .25);
        margin: 0;
    }

    .m3-mediaText.matchHeight.pos-left .m3-mediaText__img,
    .m3-mediaText.matchHeight.pos-right .m3-mediaText__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Caption absolut unten, mit weißem Hintergrund */
    .m3-mediaText.matchHeight.pos-left .m3-mediaText__caption,
    .m3-mediaText.matchHeight.pos-right .m3-mediaText__caption {
        position: absolute;
        left: 3px;
        right: 3px;
        bottom: 3px;

        z-index: 2;
        margin: 0;
        padding: 0.25rem 0.75rem;

        background: #fff;
        color: inherit;
    }
}