/* Schreibe hier deinen CSS-Code hin */

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* erstelle 12 gleichmäßige Spalten*/
    column-gap: 30px; /*spaltenabstand*/
    row-gap: 30px; /* zeilenabstand*/
}

.product {
    grid-area:	3 / 9 / span 2 / span 4;
    background-color: #F2D1C9 ;

}

.podcast {
    grid-area:	3 / 5 / span 1 / span 4;
    background-color: #E2CFEA ;
}

.portfolio-1 {
    grid-area:	1 / 1 / span 1 / span 12;
    background-color: #CDDDDD ;
}

.portfolio-2 {
    grid-area:	2 / 1 / span 1 / span 12;
    background-color: #C3F3C0 ;
}

.wordpress {
    grid-area:	4 / 5 / span 1 / span 4;
    background-color: #EFCB68 ;
}

.animation {
    grid-area:	3 / 1 / span 2 / span 4;
    background-color: #C9CEBD ;
}



/* Dieser CSS-Code darf NICHT verändert werden */
a{color:#000;text-decoration:none}body{margin:30px}.grid-container{height:90vh}.item{transition:.5s;
border:1px solid #fff;cursor:pointer}.item:hover{background-color:#fff;border:1px solid #000}
@media (max-width:1199px){.grid-container{column-gap:15px;row-gap:15px}}@media (max-width:767px){body
{margin:15px}.grid-container{display:block;height:auto;font-size:18px}.item{margin-bottom:15px}}