@layer components {
  .feed {
    max-inline-size: 36rem;
    margin-inline: auto;
    padding: var(--space-8) var(--space-4);
    font-family: var(--font-sans);
    color: var(--color-ink);
  }

  .feed__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xl);
  }

  .feed__rss-icon {
    inline-size: 1.75rem;
    color: oklch(70.5% 0.153 53.39);
  }

  .feed__site-name {
    margin-block-start: var(--space-4);
    font-size: var(--text-2xl);
    font-weight: 800;
  }

  .feed__site-link {
    font-size: var(--text-sm);
    text-decoration: underline;
  }

  .feed__filter-section {
    margin-block-start: var(--space-8);
  }

  .feed__filter-label {
    font-size: var(--text-sm);
  }

  .feed__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
  }

  .feed__filter-list a {
    text-decoration: underline;
  }

  .feed__entries-heading {
    margin-block-start: var(--space-8);
    margin-block-end: var(--space-3);
    font-size: var(--text-xl);
    font-weight: 700;
  }

  .feed__entry {
    padding-block-end: var(--space-8);
  }

  .feed__entry-date {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-style: italic;
  }

  .feed__entry-title {
    font-weight: 700;
  }

  .feed__entry-title a {
    text-decoration: underline;
  }

  .feed__entry-summary {
    font-size: var(--text-xs);
  }
}