@layer components {
  .table {
    border-collapse: collapse;
    inline-size: var(--size-full);

    th {
      color: var(--color-rust);
      font-size: var(--text-xs);
      font-weight: var(--font-bold);
      letter-spacing: 0.06em;
      padding-block-end: var(--size-2);
      text-align: start;
      text-transform: uppercase;
    }

    td {
      border-block-start: 1px dashed var(--color-border);
      padding-block: var(--size-3);
    }

    :is(th, td) + :is(th, td) {
      padding-inline-start: var(--size-4);
    }
  }
}