/* -------------------------------- 

File#: _1_article-preview
Title: Article Preview
Descr: Blog post excerpt, containing a link to the article page
Usage: codyhouse.co/license

-------------------------------- */
.story__img {
  display: block;
  transition: opacity 0.2s;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}
.story__img:hover {
  opacity: 0.85;
}
.story__img img {
  display: block;
  width: 100%;
}

.story__category {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary-dark);
  line-height: 1;
  text-decoration: none;
  font-size: var(--text-sm);
  background-color: var(--color-accent);
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
  font-weight: 700;
}
.story__category:hover {
  text-decoration: underline;
  background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3);
}

.story__title a {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: .8em;
}
.story__title a:hover {
  text-decoration: underline;
}

.story__author {
  --author-img-size: 50px;
  display: flex;
  grid-template-columns: var(--author-img-size) 1fr;
  align-items: center;
  gap: var(--space-xs);
}
.story__author img {
  display: block;
  width: var(--author-img-size);
  height: var(--author-img-size);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.story__author-name {
  margin-bottom: var(--space-4xs);
}
.story__author-name a {
  text-decoration: none;
  color: var(--color-primary-dark);
  font-weight: 700;
}
.story__author-name a:hover {
  text-decoration: underline;
}

.story__meta {
  font-size: var(--text-sm);
  color: var(--color-contrast-medium);
}

@media (min-width: 64rem) {
  .story--featured {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: var(--space-md);
    align-items: center;
  }
  .story--featured .story__img {
    margin: 0;
  }
  .story--featured .story__title {
    font-size: var(--text-2xl);
  }
}