.grid-portfolio {
    display:grid;
    grid-gap:20px;
    grid-template-columns: repeat(8,1fr);
    grid-auto-rows: 180px;
    padding: 20px;

}

.grid-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.grid-item .image{
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.w-1{
    grid-column: span 1; 
}
.w-2{
    grid-column: span 2; 
}
.w-3{
    grid-column: span 3; 
}
.w-4{
    grid-column: span 4; 
}
.w-5{
    grid-column: span 5; 
}

.h-1{
    grid-row: span 1; 
}
.h-2{
    grid-row: span 2; 
}
.h-3{
    grid-row: span 3; 
}
.h-4{
    grid-row: span 4; 
}
.h-5{
    grid-row: span 5; 
}

.grid-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 5px;;
}

#Kinderbuch{
    object-position: 30% 80%; !important
}

#Barakudas_Titel{
    width: 90%;!important
    height: 90%;!important
    object-position: 40% 70%;!important
}


    @media screen and (max-width: 769px) {
        .grid-portfolio {
            grid-template-columns: repeat(4,1fr);
            grid-auto-flow: dense;
        } 
        
        .w-1, .w-2, .w-3, {
            grid-column: span 2;
        }

        .w-4, .w-5 {
            grid-column: span 4;
        }

        .h-2{
            grid-row: span 3;
        }
  
}

@media screen and (max-width: 500px) {
    .grid-portfolio {
        grid-template-columns: repeat(1,1fr);
    } 
    
    .w-1, .w-2, .w-3, .w-4, .w-5 {
        grid-column: span 1;
    }
}