@layer components {
  .admin-dashboard {
    width: 100%;
  }

  .admin-dashboard__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .admin-dashboard__item {
    display: flex;
  }

  .admin-dashboard__link {
    width: 100%;
    padding: var(--space-md) var(--space-lg-x1);
    color: var(--color-primary-7);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semi-bold);
    text-decoration: none;
    border: var(--border-width-1) solid var(--color-neutral-2);
    border-radius: var(--border-radius-2);
  }

  .admin-dashboard__link:hover,
  .admin-dashboard__link:active {
    border-color: var(--color-primary-3);
    color: var(--color-primary-5);
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
    .admin-dashboard__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
    .admin-dashboard__list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}