/* grid layout, 3 columns */
.wrapper {
  display: grid; /* display: inline-grid;*/
  grid-template-columns: 1fr 1fr 1fr; /* 3 x 1 fraction */
  /*grid-gap: 12px;*/ /* shorthand for grid-column-gap / grid-row-gap */
  /* gap: 12px; in future (for flex too) */
  grid-gap: 5px;
}
.wrapper-p1 {
  display: grid; /* display: inline-grid;*/
  grid-template-columns: 286px 256px 256px; /* 3 x 1 fraction */
  grid-template-rows: auto auto 295px;
  /*grid-gap: 12px;*/ /* shorthand for grid-column-gap / grid-row-gap */
  /* gap: 12px; in future (for flex too) */
  grid-gap: 20px;
}
.wrapper-p2 {
  display: grid; /* display: inline-grid;*/
  grid-template-columns: 231px 251px 316px; /* 3 x 1 fraction */
  grid-template-rows: 305px 245px;
  /*grid-gap: 12px;*/ /* shorthand for grid-column-gap / grid-row-gap */
  /* gap: 12px; in future (for flex too) */
  grid-gap: 20px;
}
.wrapper-p3 {
  display: grid; /* display: inline-grid;*/
  grid-template-columns: 266px 266px 266px; /* 3 x 1 fraction */
  grid-template-rows: auto auto;
  /*grid-gap: 12px;*/ /* shorthand for grid-column-gap / grid-row-gap */
  /* gap: 12px; in future (for flex too) */
  grid-gap: 20px;
}
.wrapper-p4 {
  display: grid; /* display: inline-grid;*/
  grid-template-columns: 266px 266px 266px; /* 3 x 1 fraction */
  grid-template-rows: auto auto;
  /*grid-gap: 12px;*/ /* shorthand for grid-column-gap / grid-row-gap */
  /* gap: 12px; in future (for flex too) */
  grid-gap: 20px;
}

.box {
    background-color: #444;
    color: #fff;
    /*padding: 1em;*/
	padding: 10px;
    /*font-size: 150%;*/
	font-size: 1em;
}
.box-i {
    /*background-color: #444;*/
    /*color: #fff;*/
	color: #000;
    /*padding: 1em;*/
	padding: 10px;
    /*font-size: 150%;*/
	font-size: 1em;
}
.box-p {
    /*background-color: #444;*/
    /*color: #fff;*/
	color: #000;
    /*padding: 1em;*/
	/*padding: 10px;*/
	padding: 0px;
    /*font-size: 150%;*/
	font-size: 1em;
}

.a {
	grid-column: 1 / span 2;  /* starts at col pos 1, spans 2 cols */
	grid-row: 	 1 / span 1;  /* starts at row pos 1, spans 1 row */
}

/* Vereinfachte version
.a {
  grid-column: auto / span 2;
}
*/

.b {
  grid-column: 3 / span 1;
  grid-row: 1 / span 2;
  font-size: 50px;
}
/* Vereinfachte version
.b {
  grid-row: auto / span 2;
}
*/

.c {
    grid-column: 1;
    grid-row: 2;
	font-size: 10px;
}

.d {
    grid-column: 2;
    grid-row: 2;
}

.e {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}
.e1 {
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}
.e2 {
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}


.f {
	grid-column: auto / span 2;
	grid-row: 	 auto / span 1;
}

.h {
	grid-column: auto / span 1;
	grid-row:	 auto / span 2;
}

/*  
 * full styles if we want to fix positioning
 *

.a {
    grid-column: 1 / span 2;
}
.b {
    grid-column: 3;
    grid-row: 1 / span 2;
}
.c {
    grid-column: 1;
    grid-row: 2;
}
.d {
    grid-column: 2;
    grid-row: 2;
}
*/

/*
.a {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}
.b {
    grid-column: 3 / span 1;
    grid-row: 1 / span 2;
}
.c {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}
.d {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}
*/

.Ireen1 {
  grid-column: auto / span 1;
  grid-row: auto / span 3;
}
.Ireen2 {
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}
.Ireen3 {
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}
.Ireen4 {
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}
.Ireen5 {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}
.Ireen6 {
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Ireen7 {
  grid-column: auto / span 3;
  grid-row: auto / span 1;
}
.Ireen8 {
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Ireen9 {
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Ireen10 {
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}
.Ireen11 {
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}
.Ireen12{
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}
.Ireen13 {
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}
.Ireen14 {
  grid-column: auto / span 3;
  grid-row: auto / span 1;
}


.Portfolio1{
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}
.Portfolio2{
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Portfolio3{
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Portfolio4{
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Portfolio5{
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}
.Portfolio6{
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}
.Portfolio7{
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Portfolio8{
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}
.Portfolio9{
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}
.Portfolio10{
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}
.Portfolio11{
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Portfolio12{
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}
.Portfolio13{
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}
.Portfolio14{
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}


@for $i from 1 through $columns {
        .col-xs-#{$i} { grid-column: auto / span $i; }
    }

@include breakpoint($medium) {
    @for $i from 1 through $columns {
        .col-md-#{$i} { grid-column: auto / span $i; }
    }
}

@include breakpoint($large) {
    @for $i from 1 through $columns {
        .col-lg-#{$i} { grid-column: auto / span $i; }
    }
}