:root {
  --grid-columns: 12;
  --grid-rows: 6;
}

$grid-columns: 12;
$grid-rows: 6;

// Default (Desktop)
@for $i from 1 through $grid-columns {
  .gp--col-start-#{$i} {
    grid-column-start: $i;
  }
  .gp--col-end-#{$i + 1} {
    grid-column-end: $i + 1;
  }
}

@for $i from 1 through $grid-rows {
  .gp--row-start-#{$i} {
    grid-row-start: $i;
  }
  .gp--row-end-#{$i + 1} {
    grid-row-end: $i + 1;
  }
}

// Tablet (max-width: 900px)
@media (max-width: 900px) {
  @for $i from 1 through $grid-columns {
    .gp--col-tablet-start-#{$i} {
      grid-column-start: $i;
    }
    .gp--col-tablet-end-#{$i + 1} {
      grid-column-end: $i + 1;
    }
  }

  @for $i from 1 through $grid-rows {
    .gp--row-tablet-start-#{$i} {
      grid-row-start: $i;
    }
    .gp--row-tablet-end-#{$i + 1} {
      grid-row-end: $i + 1;
    }
  }
}

// Mobil (max-width: 599px)
@media (max-width: 599px) {
  @for $i from 1 through $grid-columns {
    .gp--col-mobil-start-#{$i} {
      grid-column-start: $i;
    }
    .gp--col-mobil-end-#{$i + 1} {
      grid-column-end: $i + 1;
    }
  }

  @for $i from 1 through $grid-rows {
    .gp--row-mobil-start-#{$i} {
      grid-row-start: $i;
    }
    .gp--row-mobil-end-#{$i + 1} {
      grid-row-end: $i + 1;
    }
  }
}


// Anpassen des Containers
.content-grid-placement-wrapper {
  display: flex;
}
.content-grid-placement-wrapper,
.gp--grid-container {
  min-height: 100%;
}
.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));
}