@layer components {
  /* Members stack on the home screen
  /* ------------------------------------------------------------------------ */

  .member-stack {
    --hover-size: 0;
    color: inherit;
    display: block;
    position: relative;

    &:after {
      border-radius: 0.25ch;
      content: "Members";
      display: block;
      font-size: var(--txt-medium);
      font-weight: 900;
      inset: auto auto 4px 50%;
      opacity: 0;
      padding: 0 1ch;
      pointer-events: none;
      position: absolute;
      translate: -50% 100%;
      transition: all 150ms ease-out;
      z-index: 2;
    }

    .overflow-fade {
      --fade-color: var(--color-canvas) !important;
    }

    .avatar-stack {
      --border-color: var(--color-canvas);
      margin-inline: auto;

      &:hover,
      &:focus-visible {
        box-shadow: none;
      }
    }

    /* Only show the label when hovering over avatars */
    &:has(.avatar-stack:hover) {
      &:after {
        opacity: 1;
        inset-block-end: 0;
      }
    }
  }

  /* Members page
  /* ------------------------------------------------------------------------ */

  .members {
    display: grid;
    inline-size: auto;
    grid-template-columns: repeat(auto-fit, minmax(max(180px, 12cqi), 1fr));
    letter-spacing: -0.01ch;
    list-style: none;
    outline-offset: var(--inline-space-half);
    gap: var(--inline-space);
    padding: 0;
  }

  .member {
    display: flex;
    justify-content: center;
  }

  .member__card {
    --panel-padding: var(--block-space-double) var(--inline-space-double);
    --panel-size: 100%;
    align-items: center;
    border-radius: 0.75em;
    container-type: inline-size;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
    font-size: clamp(0.5rem, 3cqi, 1rem);
    justify-content: center;
    padding: 2cqi;
    text-decoration: none;
    max-inline-size: 33cqi !important;

    .avatar {
      border: 2px solid var(--color-ink-light);
      block-size: 72cqi;
      inline-size: 72cqi;
    }
  }
}