/*
--------------------------------------
Portfolio Grid
--------------------------------------
*/


.portfolio-startseite {

    width:100%;
    max-width:none;

    margin:0;
    padding:0;

}



.projekt-grid {

    display:grid;

    grid-template-columns:repeat(12,1fr);

    grid-auto-rows:minmax(40px,5vw);

    grid-auto-flow:dense;

    gap:12px;

    width:100%;

    padding:12px;

    box-sizing:border-box;

}



/*
--------------------------------------
Standard Automatik
--------------------------------------
*/


.tile-auto:nth-child(6n+1) {

    grid-column:span 8;

    grid-row:span 6;

}


.tile-auto:nth-child(6n+2) {

    grid-column:span 4;

    grid-row:span 3;

}


.tile-auto:nth-child(6n+3) {

    grid-column:span 4;

    grid-row:span 3;

}


.tile-auto:nth-child(6n+4) {

    grid-column:span 4;

    grid-row:span 4;

}


.tile-auto:nth-child(6n+5) {

    grid-column:span 8;

    grid-row:span 4;

}


.tile-auto:nth-child(6n+6) {

    grid-column:span 4;

    grid-row:span 4;

}



/*
--------------------------------------
Manuelle Größen
--------------------------------------
*/


.tile-large {

    grid-column:span 8;

    grid-row:span 8;

}



.tile-wide {

    grid-column:span 8;

    grid-row:span 4;

}



.tile-tall {

    grid-column:span 4;

    grid-row:span 8;

}



.tile-standard {

    grid-column:span 4;

    grid-row:span 4;

}



/*
--------------------------------------
Kacheln
--------------------------------------
*/


.projekt-kachel {

    position:relative;

    overflow:hidden;

    background:#f5f5f5;

}



.projekt-kachel a {

    display:block;

    width:100%;

    height:100%;

    text-decoration:none;

}



.projekt-kachel img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform 300ms ease;

}



.projekt-kachel:hover img {

    transform:scale(1.03);

}



/*
--------------------------------------
Titel
--------------------------------------
*/


.projekt-kachel h2 {

    position:absolute;

    left:20px;

    bottom:18px;

    margin:0;

    color:white;

    font-size:22px;

    font-weight:500;

    text-shadow:
    0 2px 12px rgba(0,0,0,.45);

}



/*
--------------------------------------
Tablet
--------------------------------------
*/


@media(max-width:1024px){


    .projekt-grid {

        grid-template-columns:repeat(6,1fr);

        grid-auto-rows:minmax(40px,8vw);

    }


}



/*
--------------------------------------
Mobil
--------------------------------------
*/


@media(max-width:700px){


    .projekt-grid {

        grid-template-columns:repeat(1,1fr);

        gap:12px;

        padding:12px;

    }



    .projekt-kachel {

        grid-column:span 1 !important;

        grid-row:span 5 !important;

    }


}