@layer component {
  .recent {
    .recent__title {
    }

    .recent__lede {
      margin-block: 16px 16px;

      @media (width >= calc(600 / 16 * 1rem)) {
        margin-block: 24px 24px;
      }
    }

    .recent__month-title:not(:first-of-type) {
      margin-block-start: 64px;
    }

    .recent__meta {
      text-wrap: wrap;
      color: hsl(var(--hue-primary), 14%, 55%);
      margin-block: 16px;
      font-style: italic;
      font-weight: 400;
      font-size: var(--fs-18);

      @media (width >= calc(600 / 16 * 1rem)) {
        font-size: var(--fs-20);
      }
    }

    .recent__meta-item {
      &::before {
        content: '•';
        padding-inline: 12px;
      }
    }

    .recent__meta-new {
      color: hsl(var(--hue-primary), 45%, 50%);
      /* text-decoration: 1px underline;
      text-underline-offset: 2px; */
    }

    .recent__meta-tags {
      display: inline-flex;
      align-items: center;
    }

    .recent__meta-tag {
      font-size: calc(14 / 16 * 1rem);
      font-style: normal;
      margin-inline-start: 12px;
      border-radius: 100vmax;
      background: var(--card-bg-color);
      padding: 0.25rem 0.75rem;
      border: 1px solid var(--card-border-color);
      color: hsl(var(--hue-primary), 14%, 35%);
    }
  }
}