@layer components {
  .team-skeleton-line {
    width: 64px;
    max-width: 100%;
    height: 14px;
  }

  .team-skeleton-name {
    width: 140px;
    max-width: 100%;
    height: 14px;
  }

  .team-skeleton-description {
    width: 100px;
    max-width: 100%;
    height: 12px;
    margin: 4px 0;
  }

  .team-skeleton-metric {
    width: 110px;
    max-width: 100%;
    height: 42px;
    margin: 3px 0;
  }

  .team-skeleton-hero {
    width: 200px;
    max-width: 100%;
    height: 52px;
    margin: 4px 0;
  }

  .team-skeleton-lines {
    display: grid;
    gap: var(--ts-spacing-sm);
    min-width: 0;
  }

  .team-skeleton-row-strip {
    grid-column: 1 / -1;
    width: 100%;
    height: 14px;
  }

  .team-skeleton-board-row,
  .team-skeleton-directory-row {
    min-height: 62px;
  }

  .team-skeleton-directory-row > .team-skeleton-lines {
    flex: 1;
  }

  .team-skeleton-table-row {
    height: 53px;
  }

  .team-skeleton-chart {
    align-self: stretch;
  }

  .team-skeleton-chart-block {
    width: 100%;
    height: 100%;
  }
}