/**
 *
 * Cards de Web Stories.
 * handler: pp-story-card
 * deps: pp-layout
 * version: 1.0.0
 *
 * @package theme-home
 *
 */

.story-card {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
}

.story-card__media {
  display: block;
  width: calc(100% - var(--space-4) * 2);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--space-1) solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(135deg, var(--color-accent), var(--color-story-accent))
      border-box;
}

.story-card__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: calc(var(--space-3) / 2) solid var(--color-white);
  object-fit: cover;
}

.story-card__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--line-base);
}