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

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

.site-container--section .item-tile.lazy {
  background-image: none !important;
}

.item-tile {
  display: grid;
  min-block-size: 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;
  word-break: break-word;

  @media (prefers-reduced-data: reduce) {
    background: none !important;
  }
  
  &__header {
    text-align: center;
    background-color: $dark;
    opacity: 0.9;
    display: grid;
    grid-area: tile-details;
    grid-template-columns: 5px auto 5px;
    grid-template-rows: 0 1.8em auto auto;
    grid-template-areas:
      ". 		 . 			."
      ".    banner   ."
      ".  tile-title ."
      ". tile-subtitle .";
  }
  
  &--heading {
    font-size: 3em;

    & .item-tile__header,
    & .item-tile__redacted {
      opacity: 1;
      grid-template-rows: auto;
      grid-template-areas: ". tile-title .";
    }
  }

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

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

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

  &__banner {
    padding-inline: 0.75em;
    grid-area: banner;
    inline-size: auto;
    margin-inline: auto;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
    text-align: center;
    text-decoration: none !important;
    line-height: 1.8em;
    background-color: #ebebeb;
  }

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

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

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

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