/*  ---=== PROJECTS ===--- */

/* === GRID === */
.grid{
    display: grid;
    padding-bottom: 40px;
}

/* === PROJECTS === */
.projects{
    grid-template-columns: repeat(3, minmax(min(50%, 200px), 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.projects img{
    max-width: 100%;
}
.projects div{
    border: 6px var(--green) solid;
    background: var(--green);
}
.projects h3{
    font-size: 25px;
    margin: 0;
} 

/* ======================================================== */

/* === SUBSITES === */
/* recepie */
.recepie{
    grid-template-columns: repeat(2, 1fr);
}
.recepie img{
    width: 100%;
}

/* overstrimulated */
.overstirmulated{
    grid-template-columns: repeat(2, 1fr);
}

/* valora */
.valora{
    grid-template-columns: repeat(2, 1fr);
}

/* game */
.game{
    grid-template-columns: repeat(2, 1fr);
}

/* ======================================================== */


/* === STORIES === */

/* flex */
.stories-flex{
    justify-content: start;
    gap: 100px;
}

/* grid */
.stories-grid{
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
}
.stories-grid img{
    width: 100%;
}
.material-stories-briefbogen{
    grid-area: 1 / 1 / 4 ;
}
.stories-grid h2{
    grid-area: 1 / 1 / 1 / 4;
}

/* ======================================================== */


/* === PROGRAMS === */
.programs-container{
    grid-area: 3 / 2;
}
.programs{
    grid-template-columns: 100px 100px;
    gap: 20px;
}
.programs h3{
    grid-area: 1 / 1 / 1 / end;
}
.programs img{
    width: 100px;
}

/* ======================================================== */


.personal1{
    grid-area: 1 / 1 / 2 / 2;
    padding-bottom: 60px;
}
.personal2{
    grid-area: 1 / 2 / 2 / 4; 
}
.personal3{
    grid-area: 2 / 3;
}
.personal5{
    grid-area: 2 / 2 / 2 / 1;
    padding-bottom: 60px;
}
.personal6{ 
    grid-area: 4 / 1 / 3 / 3 ;  
} 
#info{
    width: 10%;
    float: left;
    margin: 10px;
}