:root {
  --story-rating: rgba(200,100,75);
  --story-genre: rgba(100,75,200);
}

.story {
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: rgba(255,255,255,1);
  display: grid;
  grid-gap: 0px;
  grid-template:
    "story-content story-cover"
    / 1fr 200px;
}

.story-content {
  grid-area: story-content;
}

@media (max-width: 768px) {
  .story {
    grid-template:
      "story-cover"
      "story-content";
  }  
}

.story-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
  max-height: 500px;
  grid-area: story-cover;
  overflow: hidden;
}

.story-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-header a:link {
  color:;
}

.story-header a:visited {
  color:;
}

.story-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.story-rating {
  border-radius: var(--border-radius);
  background-color: var(--story-rating);
  color: var(--text-light);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}

.story-genre {
  border-radius: var(--border-radius);
  background-color: var(--story-genre);
  color: var(--text-light);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
}