.link--tile {
  text-decoration: none;
  box-sizing: border-box;
  border: 2px solid transparent;

  &:hover {
    border-color: $dark;
  }
}

.item-tile {
  display: grid;
  min-height: 180px;
  grid-template-columns: 5% auto 5%;
  grid-template-rows: 2.5% auto 2.5%;
  grid-template-areas:
    ".       .      ."
    ". tile-details ."
    ".       .      .";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  &.lazy {
    background-image: none !important;
  }
  
  &--heading {
    font-size: 3em;

    & .item-tile__header {
      opacity: 1;
    }
  }
  
  &--ohwhatohjeez {
    border: 2px solid $ohwhatohjeez;
  }

  &--oldphaloskepsis {
    border: 2px solid $oldphaloskepsis;
  }

  &--omphaloskepsis {
    border: 2px solid $omphaloskepsis;
  }
  
  &__header {
    text-align: center;
    background-color: $dark;
    opacity: 0.8;
    display: grid;
    grid-area: tile-details;
    grid-template-columns: 5px auto 5px;
    grid-template-rows: 0 auto auto auto;
    grid-template-areas:
      ". 		 . 			."
      ".    banner   ."
      ".  tile-title ."
      ". tile-subtitle .";
  }

  &__banner {
    padding: 0.5em 1em 0;
    grid-area: banner;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0 0 10px 10px;
    text-align: center;
    text-decoration: none !important;
    line-height: 0.5em;
    background-color: #ebebeb;
  }

  &__title,
  &__subtitle {
    color: $light;
    margin: 0;
    font-weight: normal;
  }

  &__title {
    font-size: 1.4em;
    grid-area: tile-title;
    align-self: center;

    &--long {
      font-size: 1em;
    }
  }

  &__subtitle {
    font-size: 0.8em;
    grid-area: tile-subtitle;
    align-self: start;
  }
}