/* ==========================================
    modul-typ-id: 9
    Modultyp: Bild mit Unterschrift
========================================== */

.mvi-m09-bild-mit-unterschrift {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));

    width: 100%;
    max-width: none;

    gap: var(--mvi-basiseinheit-2);

    padding:
        var(--mvi-basiseinheit-4)
        var(--mvi-basiseinheit-2);

    box-sizing: border-box;
}


/* =====================================================
   Bildblock
===================================================== */

.mvi-m09-figure {
    display: block;

    width: min(
        100%,
        var(--mvi-m09-bildgroesse)
    );

    margin: 0;
}


.mvi-m09-bild {
    display: block;

    width: 100%;
    height: auto;

    max-height: var(--mvi-m09-bildgroesse);

    object-fit: contain;
}


/* =====================================================
   Position
===================================================== */

.mvi-m09-position-links .mvi-m09-figure {
    grid-column: 1 / span 5;

    justify-self: start;
}

.mvi-m09-position-mitte .mvi-m09-figure {
    grid-column: 4 / span 6;

    justify-self: center;
}

.mvi-m09-position-rechts .mvi-m09-figure {
    grid-column: 8 / span 5;

    justify-self: end;
}


/* =====================================================
   Unterschrift
===================================================== */

.mvi-m09-unterschrift {
    margin-top: var(--mvi-basiseinheit-1);

    font-size: 0.9em;
    line-height: 1.4;
    text-align: left;
}

.mvi-m09-unterschrift:empty {
    display: none;
}


/* =====================================================
   Mobile
===================================================== */

@media (max-width: 768px) {

    .mvi-m09-bild-mit-unterschrift {
        grid-template-columns: 1fr;
    }

    .mvi-m09-position-links .mvi-m09-figure,
    .mvi-m09-position-mitte .mvi-m09-figure,
    .mvi-m09-position-rechts .mvi-m09-figure {
        grid-column: 1;

        justify-self: center;
    }
}