/* Blog List */
.blog-list {
  max-width: 1200px;
}
.blog-list p {
  font-size: 1rem;
}
.blog-list article {
  display: grid;
  grid-template-rows: 350px auto;
}

.blog-list article > a {
  overflow: hidden;
  border-radius: 25px;
}
.blog-list article img {
  object-fit: cover;
  height: 102%;
  width: 102%;
  transition: .3s ease-out;
}
.blog-list article:hover img {
  height: 100%;
  width: 100%;
}

/* Blog Articles */
article {
  margin-top: 80px;
  font-size: 1rem;
}
article p,
article li {
  font-size: 1.15rem;
  font-weight: 300;
}
.article strong, .article b {
  font-weight: 800;
}
article a,
article a:hover,
article a:visited {
  font-weight: 400;
  color: var(--brand);
}
article a:hover {
  text-decoration: underline;
}
.tags {
  text-transform: uppercase;
  font-weight: 300;
  font-size: 95%;
  opacity: 0.95;
  letter-spacing: 2px;
}
.article-image {
  border-radius: 25px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 400px;
}
article .article-content img {
  max-width: 100%;
  object-fit: cover;
  border: 2px solid var(--contrast);
  border-radius: 2rem;
}
article .article-credit {
  margin-top: 0.25rem;
  font-size: 75%;
  margin-left: auto;
  a, a:hover {
    color: var(--text);
  }
}

.article article {
  max-width: 750px;
}
article h1 {
  font-size: 350%;
  letter-spacing: 1px;
}
article .article-title h2 {
  font-size: 160%;
  line-height: unset;
  letter-spacing: unset;
  text-transform: unset;
  font-weight: 400;
  opacity: 0.85;
}
[data-theme="light"] article .article-title h2 {
  opacity: 0.65;
}
article h2 {
  font-size: 145%;
  font-weight: 500;
  letter-spacing: unset;
  text-transform: capitalize;
}
article h2:not(:first-of-type) {
  margin-top: 2rem;
}
article h3 {
  font-size: 125%;
  text-transform: none;
  letter-spacing: initial;
}
article h6 {
  letter-spacing: unset;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}
[data-theme="light"] article h6 {
  opacity: 0.5;
}

@media screen and (max-width: 991px) {
  article h1 {
    font-size: 3rem;
  }
}
