/*
Grid Modul

Das Grid Modul erlaubt es, eine Website in mehrere Spalten aufzuteilen. Hierzu
    wird der aufzuteilende Raum zunächst in Zeilen (.grid Blöcke) aufgeteilt und
    im Anschluss mit Zellen (.grid-item Elemente) gefüllt. Über Modifizierer
    Klassen kann das Verhalten der Zellen pro Block, sowie die x-Achsen Dimension
    pro Zelle definiert werden.

Für komplexe Layouts können neue .grid Blöcke innerhalb von .grid-item Elementen
    plaziert werden. Die Modifizierer Klassen des äußeren .grid Blocks hat dabei
    keinerlei Einfluss auf das Umbruchverhalten des inneren .grid Blocks, so dass
    dieser mit einem eigenen Modifizierer manipuliert werden kann. Ohne eigene
    Modifizierer Klasse umbrechen die Elemente des inneren Blocks ab 450 Pixeln
    maximaler Bildschirmbreite

Styleguide 2.0
*/

/*
.grid-item

Definiert eine Zelle/Spalte/Begrenzung innerhalb eines `.grid` Blocks. Bis zu vier
    `.grid-item` Elemente können innerhalb eines Block sitzen. Jedes dieser Elemente
    ist als Defaultwert 25% breit. Durch anhängen von Modifizierungsklassen an
    das jeweilige Element kann dessen Breite variiert werden.

.m-spans-100 - Das Element hat eine Breite von 100%
.m-spans-90  - Das Element hat eine Breite von 90%
.m-spans-85  - Das Element hat eine Breite von 85%
.m-spans-80  - Das Element hat eine Breite von 80%
.m-spans-75  - Das Element hat eine Breite von 75%
.m-spans-70  - Das Element hat eine Breite von 70%
.m-spans-66  - Das Element hat eine Breite von 66%
.m-spans-60  - Das Element hat eine Breite von 60%
.m-spans-50  - Das Element hat eine Breite von 50%
.m-spans-40  - Das Element hat eine Breite von 40%
.m-spans-33  - Das Element hat eine Breite von 33%
.m-spans-30  - Das Element hat eine Breite von 30%
.m-spans-25  - Das Element hat eine Breite von 25%
.m-spans-20  - Das Element hat eine Breite von 20%
.m-spans-15  - Das Element hat eine Breite von 15%
.m-spans-10  - Das Element hat eine Breite von 10%

Markup:
<div class="grid">
    <div class="grid-item {$modifiers}">
        <span class="cssguide-helper block">CSSGuide</span>
    </div>
</div>

Styleguide 2.0.2

*/
.grid-item {
    display: inline-block; /* inline-block element to align multiple of them side by side */
    vertical-align: top; /* make stick to the top of the grid-row; */
    width: 25%; /* by default, grid-items are 1/4 of all available space */
}

.grid-item.m-spans-100 {
    width: 100%;
}

.grid-item.m-spans-90 {
    width: 90%;
}

.grid-item.m-spans-85 {
    width: 85%;
}

.grid-item.m-spans-80 {
    width: 80%;
}

.grid-item.m-spans-75 {
    width: 75%;
}

.grid-item.m-spans-70 {
    width: 70%;
}

.grid-item.m-spans-66 {
    width: 66.444%;
}

.grid-item.m-spans-60 {
    width: 60%;
}

.grid-item.m-spans-50 {
    width: 50%;
}

.grid-item.m-spans-40 {
    width: 40%;
}

.grid-item.m-spans-33 {
    width: 33.333%;
}

.grid-item.m-spans-30 {
    width: 30%;
}

.grid-item.m-spans-25 {
    width: 25%;
}

.grid-item.m-spans-20 {
    width: 20%;
}

.grid-item.m-spans-15 {
    width: 15%;
}

.grid-item.m-spans-10 {
    width: 10%;
}


/*
.grid

Markiert einen DOM-Knoten als `.grid` Block. Ein Block vom Typ `.grid` nimmt ein bis
    vier `.grid-item` Elemente auf und lässt diese als Spalten fungieren. Über
    Modifizierer Klassen können die Elemente eines `.grid` Blocks an unterschiedlichen
    Fensterbreiten umbrochen werden. Ohne Modifizierer umbrechen die Elemente
    eines Blocks ab einer maximalen Bildschirmbreite von 450 Pixeln.

.m-breaks-500  - `.grid-item` Kindknoten umbrechen ab 500 Pixeln Bildschirmbreite
.m-breaks-600  - `.grid-item` Kindknoten umbrechen ab 600 Pixeln Bildschirmbreite
.m-breaks-700  - `.grid-item` Kindknoten umbrechen ab 700 Pixeln Bildschirmbreite
.m-breaks-800  - `.grid-item` Kindknoten umbrechen ab 800 Pixeln Bildschirmbreite
.m-breaks-900  - `.grid-item` Kindknoten umbrechen ab 900 Pixeln Bildschirmbreite
.m-breaks-1000 - `.grid-item` Kindknoten umbrechen ab 1000 Pixeln Bildschirmbreite
.m-breaks-1100 - `.grid-item` Kindknoten umbrechen ab 1100 Pixeln Bildschirmbreite
.m-breaks-1200 - `.grid-item` Kindknoten umbrechen ab 1200 Pixeln Bildschirmbreite
.m-flipped     - `.grid-item` Kindknoten werden in umgekehrter Reihenfolge angezeigt

Markup:
<div class="grid {$modifiers}">
    <div class="grid-item">
        <span class="cssguide-helper block">CSSGuide</span>
    </div>
    <div class="grid-item">
        <span class="cssguide-helper block">CSSGuide</span>
    </div>
    <div class="grid-item">
        <span class="cssguide-helper block">CSSGuide</span>
    </div>
    <div class="grid-item">
        <span class="cssguide-helper block">CSSGuide</span>
    </div>
</div>

Styleguide 2.0.1

*/
.grid {
    display: block;
    margin: 0 -10px 1.2em -10px; /* "hides" side-gaps of first/last childboxes */

    font-size: 0; /* removes unwanted gaps between boxes caused by inline-handling of childnodes */
}
.grid-item {
    padding: 0 10px;
}

.grid.m-flipped {
    direction: rtl;
}

.grid.m-flipped > .grid-item {
    direction: ltr;
}

@media screen and (max-width: 500px) {
    .grid.m-breaks-500 > .grid-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .grid.m-breaks-600 > .grid-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 700px) {
    .grid.m-breaks-700 > .grid-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .grid.m-breaks-800 > .grid-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 900px) {
    .grid.m-breaks-900 > .grid-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    .grid.m-breaks-1000 > .grid-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 1100px) {
    .grid.m-breaks-1100 > .grid-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .grid.m-breaks-1200 > .grid-item {
        display: block;
        width: 100%;
    }
}