/* posittion cells */

#cell_1{
    grid-area: 2/1 / span 1 / span 1;
}

#cell_1_thumbnail {
    grid-area: 3/1 / span 3 / span 1;
}

#cell_2{
    grid-area: 3/2 / span 1 / span 1;
}

#cell_2_thumbnail {
    grid-area: 4/2 / span 3 / span 1;
}

#cell_3{
    grid-area: 2/3 / span 1 / span 1;
}

#cell_3_thumbnail {
    grid-area: 3/3 / span 3 / span 1;
}

#cell_4{
    grid-area: 5/3 / span 1 / span 1;
}

#cell_4_thumbnail {
    grid-area: 6/3 / span 3 / span 1;
}  

#cell_5{
    grid-area: 5/1 / span 1 / span 1;
}

#cell_5_thumbnail {
    grid-area: 6/1 / span 3 / span 1;
}

#cell_6{
    grid-area: 6/2 / span 1 / span 1;
}

#cell_6_thumbnail {
    grid-area: 7/2 / span 3 / span 1;
}

#cell_7{
    grid-area: 8/3 / span 1 / span 1;
}

#cell_7_thumbnail {
    grid-area: 9/3 / span 3 / span 1;
}

/* tablets */

@media screen and (max-width:885px) {

    #cell_1{
        grid-area: 4/1 / span 1 / span 1;
    }

    #cell_1_thumbnail {
        grid-area: 5/1 / span 3 / span 1;
    }

    #cell_2{
        grid-area: 5/2 / span 1 / span 1;
    }

    #cell_2_thumbnail {
        grid-area: 6/2 / span 3 / span 1;
    }

    #cell_3{
        grid-area: 4/3 / span 1 / span 1;
    }

    #cell_3_thumbnail {
        grid-area: 5/3 / span 3 / span 1;
    }

    #cell_4{
        grid-area: 7/3 / span 1 / span 1;
    }

    #cell_4_thumbnail {
        grid-area: 8/3 / span 3 / span 1;
    }  

    #cell_5{
        grid-area: 7/1 / span 1 / span 1;
    }

    #cell_5_thumbnail {
        grid-area: 8/1 / span 3 / span 1;
    }

    #cell_6{
        grid-area: 8/2 / span 1 / span 1;
    }

    #cell_6_thumbnail {
        grid-area: 9/2 / span 3 / span 1;
    }

    #cell_7{
        grid-area: 10/3 / span 1 / span 1;
    }

    #cell_7_thumbnail {
        grid-area: 11/3 / span 3 / span 1;
    }
}

/* mobile */

@media screen and (max-width: 700px) {

    h1 {
      font-size: 20vw;
      line-height: 18vw;
    }

    #cell_1{
        grid-area: 6/1 / span 1 / span 1;
    }

    #cell_1_thumbnail {
        grid-area: 7/1 / span 6 / span 1;
    }

    #cell_2{
        grid-area: 14/1 / span 1 / span 1;
    }

    #cell_2_thumbnail {
        grid-area: 15/1 / span 6 / span 1;
    }

    #cell_3{
        grid-area: 22/1 / span 1 / span 1;
    }

    #cell_3_thumbnail {
        grid-area: 23/1 / span 6 / span 1;
    }

    #cell_4{
        grid-area: 30/1 / span 1 / span 1;
    }

    #cell_4_thumbnail {
        grid-area: 31/1 / span 6 / span 1;
    }

    #cell_5{
        grid-area: 38/1 / span 1 / span 1;
    }

    #cell_5_thumbnail {
        grid-area: 39/1 / span 6 / span 1;
    }

    #cell_6{
        grid-area: 46/1 / span 1 / span 1;
    }

    #cell_6_thumbnail {
        grid-area: 47/1 / span 6 / span 1;
    }

    #cell_7{
        grid-area: 54/1 / span 1 / span 1;
    }

    #cell_7_thumbnail {
        grid-area: 55/1 / span 6 / span 1;
    }

}