/* posittion cells */

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

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

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

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

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

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

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

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

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

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

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

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

/* tablet */

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

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

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

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

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

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

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

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

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

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

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

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

    #cell_6_thumbnail {
        grid-area: 8/3 / span 2 / 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 5 / span 1;
    }

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

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

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

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

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

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

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

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

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

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

}