
$border: 1px solid $gray-500;

.layout-header-sidebar20-content80-footer,
.layout-header-content80-sidebar20-footer,
.layout-header-sidebar50-content50-footer {

  @media screen and (min-width: 500px) {

    .ema-layout-wrapper {
      display: grid;
      //grid-gap: 10px;
    }

    /* no grid support? */
    .sidebar {
      float: left;
      width: 20%;
      //width: 19.1489%;
    }

    .content {
      float: right;
      width: 80%;
      //width: 79.7872%;
    }

    .ema-layout-wrapper {
      margin: 0 auto;
      grid-template-columns: 1fr 3fr;
    }

    .header, .footer {
      grid-column: 1 / -1;
      /* needed for the floated layout */
      clear: both;
    }

  }

  .ema-layout-wrapper > * {
    //padding: 20px;
    /* needed for the floated layout*/
    margin-bottom: 10px;
  }

  /* We need to setVar the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
  @supports (display: grid) {
    .ema-layout-wrapper > * {
      width: auto;
      margin: 0;
    }
  }

}

.layout-header-content80-sidebar20-footer {

  @media screen and (min-width: 500px) {

    .ema-layout-wrapper {
      //border: $border;
      grid-template-columns: 3fr 1fr;
    }

    /* no grid support? */
    .sidebar {
      float: right;
    }

    .content {
      float: left;
    }

  }
}

.layout-header-content50-sidebar50-footer {
  .ema-layout-wrapper {
    //border: $border;
    grid-template-columns: 1fr 1fr;
  }
  .sidebar {
    float: left;
    //width: 50%;
    min-width: 49.1489%;
  }
  .content {
    float: right;
    width: 49.7872%;
    //width: 79.7872%;
  }
}

.layout-grid-fill {

  $width: 230px;
  $height: 210px;

  .ema-layout-wrapper {
    //margin: 0 20px;
    margin: 0 auto;
    display: grid;
    grid-gap: 10px;
    //justify-content: space-evenly;
    justify-items: center;
  }

  /* no grid support? */
  .ema-layout-wrapper{
    display: flex;
    flex-wrap: wrap;
  }

  .ema-layout-wrapper{
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax($width, 1fr));
    grid-auto-rows: minmax($height, auto);
    //grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    //grid-auto-rows: minmax(150px, auto);
  }

  .content {
    /* needed for the flex layout*/
    //justify-self: start | end | center | stretch;
    margin-left: 5px;
    margin-right: 5px;
    flex: 1 1 $width;
    flex: 1 1 $width;
  }

  //.header {
  //  margin-left: 5px;
  //  margin-right: 5px;
  //  flex: 0 1 100%;
  //  grid-column: 1 / -1;
  //}

  .ema-layout-wrapper> * {
    //border: $border;
    //padding: 20px;
    margin-bottom: 10px;
  }

  /* We need to setVar the margin used on flex items to 0 as we have gaps in grid.  */

  @supports (display: grid) {
    .ema-layout-wrapper> * {
      margin: 0;
    }
  }
}


