/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }

  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }

  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }

  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }

  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }

  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }

  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }

  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }

  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }

  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }

  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }

  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }

  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }

  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }

  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }

  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }

  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }

  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }

  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }

  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }

  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }

  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }

  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }

  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }

  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }

  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }

  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }

  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }

  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }

  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }

  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }

  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }

  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
}