article {
  padding: $large-spacing 0;

  @include media($large-screen) {
    @include span-columns(8.5);
  }

  .edit-page {
    @include size(24px 18px);
    color: $brown;
    display: inline-block;
    float: right;
    font-size: 1rem;
    margin: 0.5em 0 0 0;
    opacity: 0.4;
    overflow: hidden;

    &:hover {
      opacity: 1;
      border-bottom: 0;
    }
  }

  h2,
  h3 {
    margin-top: $base-spacing;
  }

  hr + h2,
  hr + h3 {
    margin-top: 0;
  }

  h4 {
    margin-top: $base-spacing;
  }

  ul {
    @extend %default-ul;
  }

  ol {
    @extend %default-ol;
  }

  .video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 2em;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  footer {
    @include clearfix;
    border-top: $base-border;
    margin-top: 5em;
    padding: $base-spacing 0;

    a {
      text-decoration: underline;
      &::before,
      &::after {
        display: inline-block;
        font-weight: 700;
        margin: 0 0.5em;
        transition: transform $duration;
      }
    }

    .previous-guide {
      float: left;

      &::before {
        content: "\2039";
      }

      &:hover::before {
        transform: translateX(-0.5em);
      }
    }

    .next-guide {
      float: right;

      &::after {
        content: "\203A";
      }

      &:hover::after {
        transform: translateX(0.5em);
      }
    }
  }

  &.x404 {
    width: 80%;
    margin: 0 auto;

    img {
      float: left;
      margin: 1em 0.5em;
      max-width: 300px;
    }
  }
}
