/* DESKTOP */



.gridcontainer {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr 1.4fr 1.4fr 1.2fr 1.4fr;
}

/* RIJ 1 */

.logo {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.titel-1 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.titel-2 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.titel-3 {
    grid-column: 5 / 6;
    grid-row: 1 / 2;
}

.barcode {
    grid-column: 6 / 8;
    grid-row: 1 / 3;
}

/* RIJ 2 */

.header {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

/* RIJ 3 */

.never {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.sigismund {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
}

.deep {
    grid-column: 6 / 7;
    grid-row: 3 / 4;
}

/* RIJ 4 */

.humble {
    grid-column: 5 / 6;
    grid-row: 4 / 5;
}

/* RIJ 5 */
.dad {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
}

.freudian {
    grid-column: 4 / 5;
    grid-row: 5 / 6;
}




/* TABLET*/

@media(min-width:768px) and (max-width:1200px){


.gridcontainer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, auto);
}

/* RIJ 1 */

.logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.titel-1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.titel-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.titel-3 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.barcode {
    grid-column: 5 / 6;
    grid-row: 1 / 3;
}

/* RIJ 2 */

.header {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
}

/* RIJ 3 */

.never {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

.humble {
    grid-column: 4 / 6;
    grid-row: 3 / 4;
}

/* RIJ  4 */

.sigismund {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
}

/* RIJ 5 */
.dad {
    grid-column: 1 / 3;
    grid-row: 5 / 6;
}

.deep {
    grid-column: 4 / 6;
    grid-row: 5 / 6;
}

/* RIJ 6 */

.freudian{
    grid-column: 3 / 5;
    grid-row: 6 / 7;
}

}

/* MOBILE */

@media(max-width:768px){

body {
    color: black;
}

.gridcontainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(12, auto);
}

.logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.header {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.titel-1 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.titel-2 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

.titel-3 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
}

.sigismund {
    grid-column: 1 / 2;
    grid-row: 6 / 7;
}

.barcode {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
}

.humble {
    grid-column: 1 / 2;
    grid-row: 8 / 9;
}

.deep{
    grid-column: 1 / 2;
    grid-row: 9 / 10;
}

.dad {
    grid-column: 1 / 2;
    grid-row: 10 / 11;
}

.never{
    grid-column: 1 / 2;
    grid-row: 11 / 12;
}

.freudian {
    grid-column: 1 / 2;
    grid-row: 12 / 13;
}

}