/* --- 
Hier kommen alle gridbasierten Elemente rein.
Das 12er-Grid bezieht sich auf die im Theme definierte "weite Breite".
------------------------------------------------------------------------------------ */
.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(2.25rem, 8.6rem));
    grid-template-rows: repeat(auto-fit, minmax(2.25rem, 4.3rem));
    gap: clamp(0rem, 1vw + 0.5rem, 2rem);
  }


/* das ist nur Entwicklugs- und Test-Zeugs */  
.grid.text-bild-collage h2 {
    font-size: clamp(1rem, 3vw + 1rem, 5rem) !important;
    grid-column: 2 / span 5;
    grid-row: 1/ span auto;
    margin: 0;
    padding: 0;
}

.grid.text-bild-collage figure.bild-1 {
    background-color: yellowgreen;
    grid-column: 8 / span 3;
    grid-row: 1 / span 5;
    padding: 0;
    margin: 0;
}

.grid.text-bild-collage figure.bild-2 {
    background-color: burlywood;
    grid-column: 3 / span 4;
    grid-row: 5 / span 3;
    padding: 0;
    margin: 0;
}

.grid.text-bild-collage p {
    grid-column: 8 / span 3;
    grid-row: 7 / span 4; 
}

@media (max-width: 910px) {
    .grid.text-bild-collage h2 {
        grid-column: 1 / span 6;
    }
    .grid.text-bild-collage p {
        grid-column: 8 / span 5;
        grid-row: 7 / span 4; 

    }
}

@media (max-width: 650px) {

    .grid.text-bild-collage figure.bild-2 {
        grid-column: 1 / span 5;
    }
}

@media (max-width: 450px) {
    .grid {
        display: block;
    }
}