body{
  background-color: #EEE;
}

div{
  border: 1px dashed #000;
  background-color: white;
}

section{
  border: 1px dashed #DDD;
}

.atf-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: 5px;
  column-gap: 20px;
  grid-auto-rows: minmax(50px, max-content);
  margin: 10px;
}

.atf-archive-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px 20px;
  grid-auto-rows: minmax(50px, max-content);
}

/* a utility class for allowing divs to push over the grid column gap */
.ragged{
  margin-right:-20px;
}

/*
  home page splash stuff 
*/

.homepage-splash{
  grid-template-areas:  " . intro intro intro intro intro intro . . . . ."
                        " . . . . . . promo promo promo promo promo promo";
}

@media (max-width: 650px) {
  .homepage-splash{
    grid-template-areas:  " . intro intro intro intro intro intro intro intro intro intro ."
                          " . promo promo promo promo promo promo promo promo promo promo .";
  }
}

.splash__intro{
  grid-area: intro;
}

.splash__promo{
  grid-area: promo;
}

/*
  promo slots
*/

.promo-right{
  grid-template-areas: "image image image image image image . text text text text .";
}

.promo-left{
  grid-template-areas: ". text text text text . image image image image image image";
}

@media (max-width: 650px) {
  .promo-left, .promo-right{
    grid-template-areas:
      ". image image image image image image image image image image ." 
      ". text text text text text text text text text text .";
  }
  .promo-left.text-first, .promo-right.text-first{
    grid-template-areas:
      ". text text text text text text text text text text . "
      ". image image image image image image image image image image .";
  }
}

.promo-50-50{
  grid-template-areas: ". primary primary primary primary primary secondary secondary secondary secondary secondary .";
}

.small-promo-primary{
  grid-area: primary;
}

.small-promo-secondary{
  grid-area: secondary;
}


/* 
  promo components
*/

.promo__text{
  grid-area: text;
}

.promo__image{
  grid-area: image;
}

/*
  archive components
*/

.journal-archive{
  grid-template-areas: " . heading heading posts posts posts posts posts posts posts posts . ";
}

.journal-archive__posts{
  grid-area: posts;
}

.journal-archive__heading{
  grid-area: heading;
}