@mixin grid($cols, $gutter) {

	display: grid;
	grid-template-columns: [full-start] repeat($cols,1fr) [full-end];
	grid-gap: $gutter;

	// default to full width PLEASE RETAIN THIS OR EVERYTHING BREAKS
	> * { grid-column-end: span $cols; }
}
@mixin template($elements...) {
  @each $element in $elements {
    &__#{$element} {
      grid-area: $element;
    }
  }
}
$b: 20px;

// GRID OBJECT
.o-grid {
	@include grid(12, $b);

	& .o-grid {
		width: 100%;
	}
}

// named area region into number area

.c-page-header {
  display:grid;
  grid-gap:0;
  @include template(title, subtitle, datetime, note, action);
  align-items:center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: "title subtitle datetime action";
    
    &--even {
      //an even split aligns with grid gap
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap:$b;
      }
    &--uneven {
      //but an uneven split shows up how that grid gap is divided across the columns
      grid-template-columns: 2fr 7fr 1fr 2fr;
      grid-gap:0;
      //view in firefox developer edition grid inspector to see alignmments
  }
      
      &--uneven2 {
        //five columns this time, ooo
      grid-template-areas: "title subtitle datetime note action";
      grid-template-columns: 2fr 3fr 2fr 4fr 1fr;
      grid-gap:0;
      }
  
}
// elements
.c-page-header  {
  $p: &;
font:1em Futura,sans-serif; word-wrap: break-word; // these styles are just put on to show you the grid cell alignment working on smaller screens-- normally you would prefer the content to expand the cell over hiding itself!
  
  >* {background: pink; height:100%; overflow:hidden}
 
  &__action {appearance: none; border:0; word-wrap: break-word;}
  &__datetime {word-wrap: break-word;}
  
  &--uneven {
    //for four uneven columns to match a 12 col parent we may distribute 3 fixed gutters of $b across the margins of four elements like so
   // 2fr   7fr 1fr   2fr
    // 0/10 2/3 9/2  10/0
    #{$p}__title {margin-right:calc(#{$b/12} * 10)}
    #{$p}__subtitle {margin-left:calc(#{$b/12} * 2); margin-right:calc(#{$b/12} * 3)}
     #{$p}__datetime {margin-left:calc(#{$b/12} * 9); margin-right: calc(#{$b/12} * 2)}
     #{$p}__action {margin-left:calc(#{$b/12} * 10); margin-right:0}
  }
    
    &--uneven2 {
      //10/2 7/5 5/7 1/11
      // 2 | 3 | 2 | 4 | 1
      // sum the fr units to the left and right positions
      //  title margin-left: g/c * 0 ; margin-right: g/c * 10 ( 3+2+4+1)
      // subtitle margin-left: g/c * 2 (2 + 0); margin-right: g/c * 7 (2 + 4 + 1)
      // datetime margin-left: g/c * 5 (0 + 2 + 3) margin-right: g/c * 5 (4+ 1)
      // note margin-left: g/c * 7 ( 2+3+2) ;margin-right: g/c *1 (1)
      // action margin-left: g/c * 11 (4+2+3+2) ;margin-right: g/c * 0 
      
    #{$p}__title {margin-right:calc(#{$b/12} * 10)}
    #{$p}__subtitle {margin-left:calc(#{$b/12} * 2); margin-right:calc(#{$b/12} * 7)}
     #{$p}__datetime {margin-left:calc(#{$b/12} * 5); margin-right: calc(#{$b/12} * 5)}
      #{$p}__note {margin-left:calc(#{$b/12} * 7); margin-right: calc(#{$b/12} * 1)}
     #{$p}__action {margin-left:calc(#{$b/12} * 11)}
     
      
      
    }
//   @media (max-width:600px) { 
//     grid-gap: 0;
//     align-items: start;
//     grid-template-columns: 1fr;
//     grid-template: "title" "subtitle" "datetime" "note" "action";
//     > * {margin:auto 0 $b/2 !important}
// }

    
  }
  


.spacer {min-height:50vh}