.container-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  max-width: 960px; // this looks most comfortable to me as an article width
  margin: 0 auto; // this makes sure the article is center aligned
  // this makes sure horizontal spaces are present on smaller screens which is improves readability
  padding: 0 8%;
}

.article-title,
.article-summary {
  text-align: center;
}

.article-summary {
  color: var(--color-secondary);
  font-weight: bold;
}

.article-title,
.article-content {
  h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
  }
}

.article-content {}

.container-details {
  a {
    color: var(--color-secondary);
  }

  a:hover {
    color: var(--color-secondary);
  }
}