#article_content {
  border: 1px solid var(--light-gray);
  border-radius: var(--border-radius);
  margin: 0 auto;
  max-width: calc(var(--container-l) + 8rem); /* Same size as when displayed on web, 8rem = padding */
  padding: 1rem 4rem;
  transition: all 0.5s ease-in-out;
  width: 100%;

  &:focus-within {
    border: 1px solid var(--theme-color-darker);
    box-shadow: 0.25rem 0.25rem 0.25rem rgba(226, 226, 226, 0.25);
  }

  *:focus-visible {
    border: unset !important;
    border-radius: 0.5rem;
    box-shadow: unset;
    outline-style: unset;
  }
}

.article-summary {
  .stat {
    text-align: center;
    width: fit-content;

    h1 {
      color: var(--theme-color-darker);
    }
  }
}

.modal__container .modal__content#edit_pinned_articles .tabs-container {
  nav.tab-navigation {
    margin-top: 0;
  }

  .card--article, .pinned-article__preview  {
    min-height: 8rem;
    max-height: 8rem;
  }

  .pinned-article__preview {
    background-color: var(--light-gray);
    border-radius: var(--border-radius);
    display: flex;
  }
}

.pinned-article-container {
  border-bottom: 1px solid var(--light-gray);
  margin-bottom: 1rem;
  padding-bottom: 1rem;

  .card--article--pinned {
    --article-card-flex-direction: column;
    --article-card-border-radius: var(--border-radius) var(--border-radius) 0 0;
    --article-card-padding: 0.5rem calc(1rem - 1px) calc(0.5rem - 1px) calc(1rem - 1px);
    --article-card-gap: 0;

    .card__thumbnail-wrapper {
      --card-thumbnail-max-width: 100%;
      max-height: 400px;
      height: 400px;
    }
  }
}