@layer components {
  .size-chart__container {
    background-color: var(--color-canvas);
    border-radius: var(--radius);
  }

  .size-chart {
    max-width: max-content;
    padding-block: var(--block-space);
    display: flex;
    flex-direction: column;
    gap: var(--block-space);

    h1 {
      font-size: 1.5rem;
    }

    th {
      font-family: var(--font-header);
      font-weight: normal;
    }
  }

  .size-chart > * {
    padding-inline: var(--block-space);
  }

  .size-chart table {
    --max-columns: 99;
    --first-column-gap: var(--block-space-double);

    margin: 0 auto;
    width: 100%;
    overflow-x: auto;
    display: grid;
    grid-template-columns: max-content repeat(var(--max-columns), min-content);
    padding-block: var(--block-space);
    border-block: var(--border);

    thead, tbody {
      display: contents;
    }

    tr {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1/-1;
    }

    td, th {
      padding-inline: var(--block-space);

      &:first-child {
        /* border-right: 1px solid var(--color-ink-weak); */
        border-right: var(--border);
        padding-inline-end: var(--first-column-gap);
        margin-inline-end: calc(var(--first-column-gap) / 2);
        text-align: left;
      }
    }

    @media screen and (width >= 48rem) {
    }
  }
}