@layer components {
  .contents {
    margin-bottom: var(--space-2xl);
  }

  .contents__label {
    margin-bottom: var(--space-xs);
    font-size: var(--text-2xs);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .contents__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--grid-gap);
    border-top: 1px solid var(--line);
  }

  .contents__link {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: baseline;
    min-height: 2.75rem;
    padding-block: 0.65rem;
    border-bottom: 1px solid var(--line);
    font-size: var(--text-ui);
    line-height: 1.35;
    color: var(--ink);
    transition: color var(--duration-base) ease;
  }

  .contents__numeral {
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-accent);
  }

  .contents__star {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    translate: 0 0.12rem;
  }

  @media (min-width: 30em) {
    .contents__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64em) {
    .contents__label {
      margin-bottom: var(--space-s);
      padding-left: 1rem;
    }

    .contents__list {
      grid-template-columns: minmax(0, 1fr);
      border-top: 0;
      background-image: linear-gradient(var(--accent), var(--accent));
      background-size: 1px calc(var(--progress, 0) * 100%);
      background-position: 0 0;
      background-repeat: no-repeat;
    }

    .contents__link {
      padding: 0.55rem 0 0.55rem 1rem;
      border-bottom: 0;
      font-size: var(--text-sm);
      color: var(--ink-soft);
    }

    .contents__link::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.45rem;
      bottom: 0.45rem;
      width: 2px;
      background: var(--accent);
      transform: scaleY(0);
      transition: transform var(--duration-slow) var(--ease-out-expo);
    }

    .contents__link[aria-current="location"] {
      color: var(--ink);
    }

    .contents__link[aria-current="location"]::before {
      transform: none;
    }
  }

  @media (hover: hover) and (min-width: 64em) {
    .contents__link:hover {
      color: var(--ink);
    }
  }
}