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

.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-base;
}

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

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

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

.department {
  grid-area: department;
}

.product-data-grid {
  grid-template-columns: 90px 190px auto;
}
