.subcategories {
  color: $frame-color-dark;
  font-family: $caption-font-family;
  line-height: 1.5;
  columns: 2;

  a,
  a:link,
  a:visited {
    color: $frame-color-dark;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  li {
    break-inside: avoid;
    page-break-inside: avoid;

    @extend .fa-icon-li-folder-open;
  }

  @include icon-fix;

  ul {
    padding-left: 35px;
  }

  @media screen and (max-width: 499px) {
    columns: 1;
  }
}

.layout-stream {
  .recommendations {
    margin-bottom: 20px;
  }
}

.stream-item {
  margin-top: 30px;
  // display: table;
  clear: both;
  max-width: 100%;

  h3 {
    margin-top: 0.2em;
  }

  hr {
    margin: 5px 30px;
  }

  .share {
    padding-top: 20px;
  }

  .meta {
    color: $frame-color-dark;
    text-align: left;
    hyphens: manual;

    a,
    a:link,
    a:visited {
      margin: 2px 10px 3px 0px;
      color: $frame-color-dark;
      text-decoration: none;
    }
    a:link:hover {
      text-decoration: underline;
    }

    .tag {
      display: inline-block;
      word-wrap: nowrap;

      @extend .fa-icon-tag;

      &::before {
        font-size: 80%;
        width: 0.8em;
        color: $frame-color-light;
      }
    }
  }
}

.feed-box {
  $hf-color: darken($frame-color-dark, 20%);
  $hh-color: darken($highlight-color, 20%);

  float: right;
  padding: 3px 7px 2px;
  border-radius: 5px;
  font-size: $base-font-size * 1.2;
  font-family: $compact-font-family;
  border: 1px solid $frame-color-light;
  box-shadow: $base-shadow $frame-color-light;

  a {
    @extend .fa-icon-rss-square;
    &::before {
      color: $highlight-color;
    }
  }

  a:hover {
    color: $hf-color;
    text-decoration: none;
    &::before {
      color: $hh-color;
    }
  }
}

#calendar-link-box {
  display: block;
  margin: 20px auto 10px;
  padding: 10px;
  text-align: center;
  max-width: 320px;
  color: $frame-color-dark;

  border-radius: 10px;
  border: 1px solid $frame-color-light;
  box-shadow: $base-shadow $frame-color-light;

  a,
  a:link,
  a:visited {
    color: $frame-color-dark;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  p {
    text-align: center;
  }

  h2 {
    margin-top: 0px;

    @media print {
      display: none;
    }
  }
}