@charset "UTF-8";

@layer utility {
  [data-letter='uppercase'] {
    text-transform: uppercase;
  }

  /* =====================
    u-table
  ===================== */
  :where(.u-table) {
    display: block grid;
    grid-template-columns: auto 1fr;
    max-inline-size: calc(920 / 16 * 1rem);
    margin-inline: auto;

    /* ==== tr ==== */
    .tr {
      position: relative;
      display: block grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-items: self-start;
      overflow: clip;
      border-block-end: 1px solid #eee;

      & :where(dt, dd) {
        padding-block: var(--nudge-2);
        padding-inline: var(--nudge-3);
        text-align: left;
      }
    }

    /* ==== dt ==== */
    & dt {
      position: relative;
      z-index: 2;
      place-content: start;
      font-weight: 600;
    }

    /* ==== dd ==== */
    & dd {
      padding-inline: var(--nudge-3);
    }
  }
}