/* ==========================================
    modul-typ-id: 5
    Modultyp: Hero
========================================== */

.mvi-m5-hero {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);

    width: 100%;
    max-width: 100%;

    margin: 0;

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

    box-sizing: border-box;
}


/* =====================================================
   Spalten
===================================================== */

.mvi-m5-hero-spalte-links,
.mvi-m5-hero-spalte-rechts {
    padding: 0 var(--mvi-basiseinheit-2);

    box-sizing: border-box;
}


/* =====================================================
   Linke Spalte
===================================================== */

.mvi-m5-hero-spalte-links {
    text-align: left;

    border-right:
        dashed var(--mvi-neutral-liniengrau) var(--mvi-linie-normal);
}

.mvi-m5-hero-spalte-links h1 {
    margin-top: 0;
    text-align: left;
}


/* =====================================================
   Rechte Spalte
===================================================== */

.mvi-m5-hero-spalte-rechts {
    text-align: left;
}

.mvi-m5-hero-spalte-rechts> :first-child {
    margin-top: 0;
}


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

@media (max-width: 768px) {

    .mvi-m5-hero {
        grid-template-columns: 1fr;
    }

    .mvi-m5-hero-spalte-links,
    .mvi-m5-hero-spalte-rechts {
        padding: 0 ;

        box-sizing: border-box;
    }


    .mvi-m5-hero-spalte-links {
        border-right: none;
    }
}