semantic-styles/package/elements/article.css

"Responsive, Themed, UI Design System."

article {
  background-color: var(--bg-2);
  box-shadow: var(--elevation-2);
  border-radius: var(--radius);
  height: fit-content;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
}

article:hover {
  box-shadow: var(--elevation-3);
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  margin-block-start: var(--space-md);
  margin-block-end: var(--space-xxs);
  margin-inline: var(--space-xs);
}

article > p {
  margin-block: var(--space-xs);
  margin-inline: var(--space-xs);
}

article > p:last-of-type {
  margin-block-end: 0;
}

article > img {
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--elevation-2);
}