////////////// Styles for the title block at the top of each page //////////////

.title {
  margin-bottom: 2.65rem;
  

  .metadata {
    padding: 0;
    margin: 0;
  
    li {
      margin-bottom: 0;
      padding: 0 .65em 0 .75em;
      color: $article-heading;
      background: rgba($article-heading, .07);
      font-size: .95rem;
      font-weight: $medium;
      border-radius: 1em;
      display: inline-block;

      &.updated-in, &.date {
        padding: 0 0 0 .4em;
        background: none;
        font-weight: normal;
        font-style: italic;
        color: rgba($article-heading, .6)
      }
    }

    .updated-in + .date::before {
      content: "•" !important;
      display: inline;
      margin-right: .5rem;
    }
  }  
}

////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@include media(small) {
  .title {
    margin-bottom: 2rem;
    h1 { margin: .35em 0 .2em; font-size: 2.4rem; }
  }
}