:root{
    --rowValue: 7;
}
        /* color: transparent; */

/* Middle Part */

ul, ol{
    text-align: start;
}
    
    .item-middle-pos{
        grid-column: 2;
        grid-row: 2;
    }
    
    .item-middle-postext{
        grid-column: 3;
        grid-row: 2;
    }
    .item-middle-neg{
        grid-column: 2;
        grid-row: 3;
    }
    .item-middle-negtext{
        grid-column: 3;
        grid-row: 3;
    }
    .item-middle-cog{
        grid-column: 2;
        grid-row: 4;
    }
    .item-middle-cogtext{
        grid-column: 3;
        grid-row: 4;
    }
    
/* Bottom Part */
    .gridcontainer-bottom{
        display: grid;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 10px;
        grid-template-columns: 20px 2fr 2fr 20px;
        column-gap: 20px;
        justify-items: center;
    }



    .gridcontainer-bottom div{
        grid-column: 2 /span 2;
        grid-row: 1 / span var(--rowValue);
        background: #004B9B;
        background: radial-gradient(circle, #0064E1 0%, #004B9B 70%);
        width: 100%;
    }

    /* Person 1 */
    .item-bottom-picture1{
        grid-column: 2;
        grid-row: 2 / span 2;
    }
    .item-bottom-header1{
        grid-column: 3;
        grid-row: 2;
        align-self: end;
    }
    .item-bottom-text1{
        grid-column: 3;
        grid-row: 3;
        align-self: start;
    }

    /* Person 2 */
    .item-bottom-picture2{
        grid-column: 2;
        grid-row: 4 / span 2;
    }
    .item-bottom-header2{
        grid-column: 3;
        grid-row: 4;
        align-self: end;
    }
    .item-bottom-text2{
        grid-column: 3;
        grid-row: 5;
        align-self: start;
    }

    /* Person 3 */
    .item-bottom-picture3{
        grid-column: 2;
        grid-row: 6 / span 2;
    }
    .item-bottom-header3{
        grid-column: 3;
        grid-row: 6;
        align-self: end;
    }
    .item-bottom-text3{
        grid-column: 3;
        grid-row: 7;
        align-self: start;
    }

    .item-bottom-picture4{
        grid-column: 2;
        grid-row: 8 / span 2;
    }
    .item-bottom-header4{
        grid-column: 3;
        grid-row: 8;
        align-self: end;
    }
    .item-bottom-text4{
        grid-column: 3;
        grid-row: 9;
        align-self: start;
    }

    /* eyes */
    #eye1{
        grid-column: 1;
        grid-row: 1;
    }
    #eye2{
        grid-column: 6;
        grid-row: 1;
    }
    #eye3{
        grid-column: 6;
        grid-row: 1;
    }
    #eye4{
        grid-column: 6;
        grid-row: 1;
    }

@media screen and (min-width:481px)
{
    /* Middle Part */

    
    .gridcontainer-middle div:first-of-type{
        grid-row: 1 / span 4;
    }
    .item-middle-postext{
        grid-column: 3 / span 3;
        text-align: start;
        justify-self: start;
    }
    .item-middle-negtext{
        grid-column: 3 / span 3;
        text-align: start;
        justify-self: start;
    }
    .item-middle-cogtext{
        grid-column: 3 / span 3;
        text-align: start;
        justify-self: start;
    }

    /* Bottom Part */
    .gridcontainer-bottom{
        grid-template-columns: repeat(6,1fr);
    }

    .gridcontainer-bottom div{
        grid-column: 2 /span 4;
    }

     /* Person 1 */
     .item-bottom-picture1{
        grid-column: 2 / span 2;
    }
    .item-bottom-header1{
        grid-column: 4 / span 2;
    }
    .item-bottom-text1{
        grid-column: 4 / span 2;
    }

    /* Person 2 */
    .item-bottom-picture2{
        grid-column: 2 / span 2;
        grid-row: 4 / span 2;
    }
    .item-bottom-header2{
        grid-column: 4 / span 2;
    }
    .item-bottom-text2{
        grid-column: 4 / span 2;
    }

    /* Person 3 */
    .item-bottom-picture3{
        grid-column: 2 / span 2;
    }
    .item-bottom-header3{
        grid-column: 4 / span 2;
    }
    .item-bottom-text3{
        grid-column: 4 / span 2;
    }

    /* Person 4 */
    .item-bottom-picture4{
        grid-column: 2 / span 2;
    }
    .item-bottom-header4{
        grid-column: 4 / spam 2;
    }
    .item-bottom-text4{
        grid-column: 4 / span 2;
    }

    #eye2{
        grid-column: 6;
        align-self: flex-start;
        margin-top: 50px;
    }
    #eye3{
        grid-column: 6;
        align-self: flex-end;
        margin-bottom: 10px;
    }
    #eye4{
        grid-column: 6;
        align-self: flex-end;
        margin-bottom: 220px;
    }
}

@media screen and (min-width:768px)
{
    :root{
        --rowValue: 5;
    }

    /* .item-headline{
        grid-row: 1;
    }  */
    /* Middle Part */
    
        
        .gridcontainer-middle div:first-of-type{
            grid-row: 1 / span 3;
        }
        
        .item-middle-pos{
            grid-column: 2 / span 2;
            grid-row: 2;
        }
        
        .item-middle-postext{
            grid-column: 2 / span 2;
            grid-row: 3;
            text-align: center;
            justify-self: center;
        }
        .item-middle-neg{
            grid-column: 4 / span 3;
            grid-row: 2;
        }
        .item-middle-negtext{
            grid-column: 4 / span 3;
            grid-row: 3;
            text-align: center;
            justify-self: center;
            
        }
        .item-middle-cog{
            grid-column: 7 / span 2;
            grid-row: 2;
        }
        .item-middle-cogtext{
            grid-column: 7 / span 2;
            grid-row: 3;
            text-align: center;
            justify-self: center;
        }
        
    /* Bottom Part */
        .gridcontainer-bottom{
            grid-template-columns: repeat(9,1fr);
        }
        .gridcontainer-bottom div{
            grid-column: 2 /span 7;
        }
        /*     

        /* Person 1 */
        .item-bottom-picture1{
            grid-column: 2 / span 2;
        }
        .item-bottom-header1{
            grid-column: 4;
        }
        .item-bottom-text1{
            grid-column: 4;
        }
    
        /* Person 2 */
        .item-bottom-picture2{
            grid-column: 6 / span 2;
            grid-row: 2 / span 2;
        }
        .item-bottom-header2{
            grid-column: 8;
            grid-row: 2;
        }
        .item-bottom-text2{
            grid-column: 8;
            grid-row: 3;
        }
    
        /* Person 3 */
        .item-bottom-picture3{
            grid-column: 2 / span 2;
            grid-row: 4 / span 2;
        }
        .item-bottom-header3{
            grid-column: 4;
            grid-row: 4;
        }
        .item-bottom-text3{
            grid-column: 4;
            grid-row: 5;
        }   

        .item-bottom-picture4{
            grid-column: 6 / span 2;
            grid-row: 4 / span 2;
        }
        .item-bottom-header4{
            grid-column: 8;
            grid-row: 4;
        }
        .item-bottom-text4{
            grid-column: 8;
            grid-row: 5;
        }
        
        #eye2{
            grid-column: 9;
        }
        #eye3{
            grid-column: 9;
        }
        #eye4{
            grid-column: 9;
        }
        
    
}
@media screen and (min-width:1025px)
{
    /* Middle Part */
        
        .gridcontainer-middle div:first-of-type{
            grid-row: 1 / span 3;
        }
        
        .item-middle-pos{
            grid-column: 3 / span 2;
        }
        
        .item-middle-postext{
            grid-column: 3 / span 2;
        }
        .item-middle-neg{
            grid-column: 6 / span 2;
        }
        .item-middle-negtext{
            grid-column: 6 / span 2;
        }
        .item-middle-cog{
            grid-column: 9 / span 2;
        }
        .item-middle-cogtext{
            grid-column: 9 / span 2;
        }
        
    /* Bottom Part */
        .gridcontainer-bottom{
            grid-template-columns: repeat(12,1fr);
            /* grid-template-columns: repeat(12,auto); */
        }
    
        .gridcontainer-bottom div{
            grid-column: 3 /span 8;
        }
    
        /* Person 1 */
        .item-bottom-picture1{
            grid-column: 3 / span 2;
            grid-row: 2 / span 2;
        }
        .item-bottom-header1{
            grid-column: 5 / span 2;
        }
        .item-bottom-text1{
            grid-column: 5 / span 2;
        }
    
        /* Person 2 */
        .item-bottom-picture2{
            grid-column: 7 / span 2;
            grid-row: 2 / span 2;
        }
        .item-bottom-header2{
            grid-column: 9 / span 2;
            grid-row: 2;
        }
        .item-bottom-text2{
            grid-column: 9 / span 2;
            grid-row: 3;
        }
    
        /* Person 3 */
        .item-bottom-picture3{
            grid-column: 3 / span 2;
        }
        .item-bottom-header3{
            grid-column: 5 / span 2;
        }
        .item-bottom-text3{
            grid-column: 5 / span 2;
        }

        .item-bottom-picture4{
            grid-column: 7 / span 2;
        }
        .item-bottom-header4{
            grid-column: 9 / span 2;

        }
        .item-bottom-text4{
            grid-column: 9 / span 2;
        }

        #eye1{
            grid-column: 1 / span 2;
        }
        #eye2{
            grid-column: 11 / span 2;
        }
        #eye3{
            grid-column: 11 / span 2;
        }
        #eye4{
            grid-column: 11 / span 2;
        }
    
    
}