@import "import";

.article {
  @include flex(column);
  gap: spacer(lg);
  width: 100%;

  @include breakpoint(xxlarge) {
    padding-inline: spacer(11);
  }

  .head {
    @include flex(column, flex-start, flex-start);
    gap: spacer(4);
    width: 100%;

    .coverImageContainer {
      position: relative;
      height: 100%;
      width: 100%;
    }

    .meta {
      display: flex;
      color: color(text-faint-light);
      font-size: 1.6rem;

      > :not(:last-child)::after {
        content: "|";
        margin: 0.25em;
      }
    }

    .info {
      @include flex(column, flex-start, flex-start);
      gap: spacer(1);
    }

    .tag {
      &:hover {
        background-color: color(fog);
      }
    }
  }

  .body {
    width: 100%;
    max-width: max-w(content);

    > *:not(:first-child) {
      margin-top: spacer(xs);
    }

    h1 {
      @include type-item(heading-2);
    }

    h2 {
      @include type-item(heading-3);
    }

    h3 {
      @include type-item(heading-4);

      &:not(:first-child) {
        margin-top: spacer(sm) !important;
      }
    }

    h4 {
      @include type-item(heading-5);
    }

    h5 {
      @include type-item(heading-6);
    }

    h6 {
      @include type-item(heading-6, italic);
    }

    p > a {
      @include inherit-type;
      display: inline;
      text-decoration: underline;
      text-underline-offset: 0.2em;
      text-decoration-thickness: 0.05em;
    }

    hr:not(:last-child) {
      margin: spacer(sm) 0 !important;
    }
  }
}