:host {
  @apply grid grid-flow-row gap-2 p-4 bg-white rounded w-full;
  height: 23rem;
  max-height: 23rem;
}

.item-header-details {
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-template-areas:
    "contributors product-group"
    "title department";
}

.contributors {
  grid-area: contributors;
  max-width: 95%;
}

.title {
  grid-area: title;
  max-width: 95%;
}

.title.xl {
  @apply font-bold text-xl;
}

.title.lg {
  @apply font-bold text-lg;
}

.title.md {
  @apply font-bold text-p2;
}

.title.sm {
  @apply font-bold text-p3;
}

.title.xs {
  @apply font-bold text-xs;
}

.product-group {
  grid-area: product-group;
}

.department {
  grid-area: department;
}

.product-data-grid {
  max-width: 100%;
  overflow: hidden;
  grid-template-columns: 5.625rem 11.875rem 1fr;
}
