:root { --grid-columns: 12; --grid-rows: 6; } .gp--col-start-1 { grid-column-start: 1; } .gp--col-end-2 { grid-column-end: 2; } .gp--col-start-2 { grid-column-start: 2; } .gp--col-end-3 { grid-column-end: 3; } .gp--col-start-3 { grid-column-start: 3; } .gp--col-end-4 { grid-column-end: 4; } .gp--col-start-4 { grid-column-start: 4; } .gp--col-end-5 { grid-column-end: 5; } .gp--col-start-5 { grid-column-start: 5; } .gp--col-end-6 { grid-column-end: 6; } .gp--col-start-6 { grid-column-start: 6; } .gp--col-end-7 { grid-column-end: 7; } .gp--col-start-7 { grid-column-start: 7; } .gp--col-end-8 { grid-column-end: 8; } .gp--col-start-8 { grid-column-start: 8; } .gp--col-end-9 { grid-column-end: 9; } .gp--col-start-9 { grid-column-start: 9; } .gp--col-end-10 { grid-column-end: 10; } .gp--col-start-10 { grid-column-start: 10; } .gp--col-end-11 { grid-column-end: 11; } .gp--col-start-11 { grid-column-start: 11; } .gp--col-end-12 { grid-column-end: 12; } .gp--col-start-12 { grid-column-start: 12; } .gp--col-end-13 { grid-column-end: 13; } .gp--row-start-1 { grid-row-start: 1; } .gp--row-end-2 { grid-row-end: 2; } .gp--row-start-2 { grid-row-start: 2; } .gp--row-end-3 { grid-row-end: 3; } .gp--row-start-3 { grid-row-start: 3; } .gp--row-end-4 { grid-row-end: 4; } .gp--row-start-4 { grid-row-start: 4; } .gp--row-end-5 { grid-row-end: 5; } .gp--row-start-5 { grid-row-start: 5; } .gp--row-end-6 { grid-row-end: 6; } .gp--row-start-6 { grid-row-start: 6; } .gp--row-end-7 { grid-row-end: 7; } @media (max-width: 900px) { .gp--col-tablet-start-1 { grid-column-start: 1; } .gp--col-tablet-end-2 { grid-column-end: 2; } .gp--col-tablet-start-2 { grid-column-start: 2; } .gp--col-tablet-end-3 { grid-column-end: 3; } .gp--col-tablet-start-3 { grid-column-start: 3; } .gp--col-tablet-end-4 { grid-column-end: 4; } .gp--col-tablet-start-4 { grid-column-start: 4; } .gp--col-tablet-end-5 { grid-column-end: 5; } .gp--col-tablet-start-5 { grid-column-start: 5; } .gp--col-tablet-end-6 { grid-column-end: 6; } .gp--col-tablet-start-6 { grid-column-start: 6; } .gp--col-tablet-end-7 { grid-column-end: 7; } .gp--col-tablet-start-7 { grid-column-start: 7; } .gp--col-tablet-end-8 { grid-column-end: 8; } .gp--col-tablet-start-8 { grid-column-start: 8; } .gp--col-tablet-end-9 { grid-column-end: 9; } .gp--col-tablet-start-9 { grid-column-start: 9; } .gp--col-tablet-end-10 { grid-column-end: 10; } .gp--col-tablet-start-10 { grid-column-start: 10; } .gp--col-tablet-end-11 { grid-column-end: 11; } .gp--col-tablet-start-11 { grid-column-start: 11; } .gp--col-tablet-end-12 { grid-column-end: 12; } .gp--col-tablet-start-12 { grid-column-start: 12; } .gp--col-tablet-end-13 { grid-column-end: 13; } .gp--row-tablet-start-1 { grid-row-start: 1; } .gp--row-tablet-end-2 { grid-row-end: 2; } .gp--row-tablet-start-2 { grid-row-start: 2; } .gp--row-tablet-end-3 { grid-row-end: 3; } .gp--row-tablet-start-3 { grid-row-start: 3; } .gp--row-tablet-end-4 { grid-row-end: 4; } .gp--row-tablet-start-4 { grid-row-start: 4; } .gp--row-tablet-end-5 { grid-row-end: 5; } .gp--row-tablet-start-5 { grid-row-start: 5; } .gp--row-tablet-end-6 { grid-row-end: 6; } .gp--row-tablet-start-6 { grid-row-start: 6; } .gp--row-tablet-end-7 { grid-row-end: 7; } } @media (max-width: 599px) { .gp--col-mobil-start-1 { grid-column-start: 1; } .gp--col-mobil-end-2 { grid-column-end: 2; } .gp--col-mobil-start-2 { grid-column-start: 2; } .gp--col-mobil-end-3 { grid-column-end: 3; } .gp--col-mobil-start-3 { grid-column-start: 3; } .gp--col-mobil-end-4 { grid-column-end: 4; } .gp--col-mobil-start-4 { grid-column-start: 4; } .gp--col-mobil-end-5 { grid-column-end: 5; } .gp--col-mobil-start-5 { grid-column-start: 5; } .gp--col-mobil-end-6 { grid-column-end: 6; } .gp--col-mobil-start-6 { grid-column-start: 6; } .gp--col-mobil-end-7 { grid-column-end: 7; } .gp--col-mobil-start-7 { grid-column-start: 7; } .gp--col-mobil-end-8 { grid-column-end: 8; } .gp--col-mobil-start-8 { grid-column-start: 8; } .gp--col-mobil-end-9 { grid-column-end: 9; } .gp--col-mobil-start-9 { grid-column-start: 9; } .gp--col-mobil-end-10 { grid-column-end: 10; } .gp--col-mobil-start-10 { grid-column-start: 10; } .gp--col-mobil-end-11 { grid-column-end: 11; } .gp--col-mobil-start-11 { grid-column-start: 11; } .gp--col-mobil-end-12 { grid-column-end: 12; } .gp--col-mobil-start-12 { grid-column-start: 12; } .gp--col-mobil-end-13 { grid-column-end: 13; } .gp--row-mobil-start-1 { grid-row-start: 1; } .gp--row-mobil-end-2 { grid-row-end: 2; } .gp--row-mobil-start-2 { grid-row-start: 2; } .gp--row-mobil-end-3 { grid-row-end: 3; } .gp--row-mobil-start-3 { grid-row-start: 3; } .gp--row-mobil-end-4 { grid-row-end: 4; } .gp--row-mobil-start-4 { grid-row-start: 4; } .gp--row-mobil-end-5 { grid-row-end: 5; } .gp--row-mobil-start-5 { grid-row-start: 5; } .gp--row-mobil-end-6 { grid-row-end: 6; } .gp--row-mobil-start-6 { grid-row-start: 6; } .gp--row-mobil-end-7 { grid-row-end: 7; } } .gp--grid-container { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0px, 1fr)); grid-template-rows: repeat(var(--grid-rows), minmax(0px, auto)); position: absolute; inset: 0; }