main{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    gap: 1rem;
    grid-auto-flow: dense;
}

/* MOBILE */
.col-1 {grid-column: span 1;}
.col-2 {grid-column: span 2;}
.col-3 {grid-column: span 3;}
.col-4 {grid-column: span 4;}
.col-5 {grid-column: span 5;}
.col-6 {grid-column: span 6;}

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


main section {
    grid-column: span 6; /* Default för mobil. Upptar hela bredden. */
    padding: 0.5rem;
  }
  

/** Tablets */
@media (min-width: 768px) {
    [class*='col-t-'] {      /* Reset av row-span*/
        grid-row: span 1;
    }
    
    .col-t-1 {grid-column: span 1;}
    .col-t-2 {grid-column: span 2;}
    .col-t-3 {grid-column: span 3;}
    .col-t-4 {grid-column: span 4;}
    .col-t-5 {grid-column: span 5;}
    .col-t-6 {grid-column: span 6;}
    
    .row-t-2{grid-row: span 2;}
    .row-t-3{grid-row: span 3;}
    .row-t-4{grid-row: span 4;}
    .row-t-5{grid-row: span 5;}
}

/** desktop */
@media (min-width: 980px) {
    [class*='col-d-'] {      /* Reset av row-span*/
        grid-row: span 1;
    }

    .col-d-1 {grid-column: span 1;}
    .col-d-2 {grid-column: span 2;}
    .col-d-3 {grid-column: span 3;}
    .col-d-4 {grid-column: span 4;}
    .col-d-5 {grid-column: span 5;}
    .col-d-6 {grid-column: span 6;}
    
    .row-d-2{grid-row: span 2;}
    .row-d-3{grid-row: span 3;}
    .row-d-4{grid-row: span 4;}
    .row-d-5{grid-row: span 5;}
}


/** Large desktop */
@media (min-width: 1200px) {
    [class*='col-w-'] {      /* Reset av row-span*/
        grid-row: span 1;
    }

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