:root {
  --red: #ea3333;
}

.logo svg {
  fill: #fff;
}

.article-hero {
  background: transparent url('/articles/assets/post-image-colorme-hero-tile.png') repeat-x left bottom;
  position: relative;
}

.banner {
  position: relative;
  z-index: 5;
}

.navigation {
  position: relative;
  z-index: 10;
  margin-bottom: 105%
}

.navigation a {
  color: var(--grey);
}

.logo-base {
  fill: #fff;
}

.logo-title {
  fill: #fff;
}

.e-header {
  background: transparent url('/articles/assets/post-image-colorme-illo.png')
    no-repeat center 60%;
  background-size: 85%;
  box-sizing: border-box;
  padding-top: 130%;
  margin: 0.5rem 0 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1
}

.e-header .dt-published {
  color: rgba(255, 255, 255, 0.8);
}

.e-header .p-name {
  font-size: 11vw;
}

.h-entry {
  padding-top: 2.5rem
}

.h-entry a {
  color: var(--red);
}

.entry-intro + p:first-letter {
  color: var(--red);
}

.entry-intro::after  {
  background-color: var(--red);
}

@media (min-width: 35em) {
  .navigation {
    margin-bottom: 530px;
  }

  .e-header {
    background-size: 75%;
    margin: 0;
    padding-top: 30rem
  }

  .e-header .p-name {
    box-sizing: border-box;
    max-width: 46rem;
  }
}

@media (min-width: 55em) {
  .navigation {
    margin-bottom: 38vw;
  }

  .e-header {
    background-size: 43.5%;
    background-position: left bottom;
    padding-bottom: 4rem;
    padding-left: 43%;
    padding-top: 16.5rem;
    text-align: left
  }

  .e-header .p-name {
    font-size: 6vw;
    margin: 0;
    padding-bottom: 2vw;
  }

  .e-header .dt-published {
    padding-left: 0.3rem;
  }
}

@media (min-width: 69em) {
  .navigation {
    margin-bottom: 34.5vw;
  }
}

@media (min-width: 87em) {
  .navigation {
    margin-bottom: 30rem;
  }

  .e-header {
    left: calc(50% - 45rem);
    padding-left: 39rem;
    max-width: 90rem
  }

  .e-header .p-name {
    font-size: 6.2rem;
    padding-bottom: 2rem;
  }
}