$_media-item-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

.article {
  border-bottom: 1px dashed $border-color;
  padding-bottom: 1.5rem;

  @media (prefers-color-scheme: dark) {
    border-bottom: 1px dashed $border-color-dark;
  }

  img {
    background-color: $white;
    height: auto;
    max-width: 100%;

    &.left {
      float: left;
      margin-right: 1em;
    }

    &.right {
      float: right;
      margin-left: 1em;
    }
  }

  figure {
    figcaption {
      font-size: 0.7em;
      font-style: italic;
      margin: 0.25rem 0.5rem 0;
      opacity: 0.6;
      text-align: right;
    }
  }

  img,
  video,
  .flash-video {
    box-shadow: $_media-item-box-shadow;
    margin: -0.5em;
    max-width: 100%;
    padding: 0.5em;

    &.no-border {
      box-shadow: none;
    }
  }
}

.article__header {
  .meta {
    color: $meta-text-color;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-rendering: optimizelegibility;
    text-transform: uppercase;
    width: 100%;
  }

  h1 + .meta {
    margin-top: -2.25rem;
  }
}

.article__title {
  font-size: 1.35rem;

  a {
    color: $heading-color;
    text-decoration: none;

    &:hover,
    &:focus {
      color: $link-color-hover;
    }

    @media (prefers-color-scheme: dark) {
      color: $heading-color-dark;
    }
  }
}

.article__content {
  > * {
    @include container;
  }
}

.article__read-on {
  background: darken($background-color, 8);
  border-radius: 2px;
  color: mix($text-color, $text-color-light);
  display: inline-block;
  margin-bottom: 1.5em;
  margin-right: 0.5em;
  padding: 0.4em 0.8em;
  text-decoration: none;
  transition: background-color 0.5s;

  &:hover {
    background: $link-color-hover;
    color: $background-color;
    text-shadow: none;
  }

  @media (prefers-color-scheme: dark) {
    background: lighten($background-color-dark, 8);
    color: mix($text-color-dark, $text-color-light);
  }
}