@layer components {
  .entry-list {
    display: flex;
    flex-direction: column;

    & > * + * {
      border-block-start: 1px solid var(--color-border-subtle);
    }
  }

  ul + turbo-frame > ul {
    border-block-start-width: 1px;
  }

  .entry-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-4);
    padding-inline: var(--space-2);
    position: relative;

    & > a:first-child {
      position: absolute;
      inset: 0;
    }
  }

  @media (width >= 768px) {
    .entry-list__item {
      padding-inline: 0;
    }
  }

  @media (width >= 1024px) {
    .entry-list__item {
      padding-block: var(--space-6);
    }
  }

  .entry-list__meta {
    font-size: var(--text-xs);
    color: var(--color-ink-subtle);
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
  }

  .entry-list__title {
    font-weight: 600;
    font-size: var(--text-xl);
  }

  .entry-list__excerpt {
    font-size: var(--text-sm);
  }
}