@import "../variables";

.article {
  margin-bottom: $post-margin;

  &__head {
    margin-bottom: 1.25em;

    h1 {
      font-size: $biggest-font-size;
      text-align: center;
      margin-bottom: $half-margin;
    }

    h2 {
      font-size: $big-font-size;
      text-align: center;
    }

    .date {
      text-align: center;
      color: #aaa;
    }
  }

  &__body{
    img {
      max-width: 100%;
      max-height: 35em;
    }

    ul, ol{
      margin-left: $half-margin;
      margin-bottom: $single-margin;
      padding-left: $single-margin;
    }

    ul{
      list-style: disc;
    }

    p {
      margin-bottom: 1.75em;
      line-height: 1.75em;
    }

    blockquote {
      background-color: hsl(215, 10%, 96%);
      padding: 1em 1em .5em;
      margin: $single-margin 0;
      font-family: $title-font;
      font-style: italic;
      font-weight: normal;
      font-size: 1.25em;

      cite {
        margin-top: $single-margin;
        display: block;
        color: #aaa;
        font-size: initial;
        font-family: $text-font;
        text-align: right;
        margin-right: $single-margin;
      }
    }
  }
}

@media (max-width: $mobile-width) {
  .article {
    &__body {
      img {
        max-height: 20em;
      }
    }
  }
}