.article-page {
  position: relative;
  display: flex;
  width: 100%;
  min-height: calc(100% - 56px);
  height: max-content;
}


.article-container {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 6px;
  width: 100%;
  height: 100%;
}

.article-wrapper {
  width: calc(96vw - 32px);
  height: 100%;
  margin: 1rem auto;
  padding: 1rem;
  max-width: 840px;

  .article-title {
    display: flex;
    flex-direction: row;
    user-select: none;
    align-items: center;
  }

  .article-action {
    @media (max-width: 768px) {
      flex-direction: column;
    }
  }

  .article-content {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;

    & > * {
      margin-bottom: 1rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
