:host {
  @apply grid h-28 p-4 rounded bg-white gap-x-4;
  grid-template-areas:
    "cover author ean order"
    "cover title quantity .";
  grid-template-columns: auto 1fr 1fr auto;
}

.cover {
  grid-area: cover;
}

.cover shared-skeleton-loader {
  @apply h-20 w-12;
}

.author {
  grid-area: author;
}

.author shared-skeleton-loader {
  @apply h-6 w-28;
}

.ean {
  grid-area: ean;
}

.ean shared-skeleton-loader {
  @apply h-6 w-32;
}

.order {
  grid-area: order;
}

.order shared-skeleton-loader {
  @apply h-8 w-36;
}

.title {
  grid-area: title;
}

.title shared-skeleton-loader {
  @apply h-6 w-44;
}

.quantity {
  grid-area: quantity;
}

.quantity shared-skeleton-loader {
  @apply h-6 w-20;
}
