/* Layout for worker-rendered pack pages and the branded 404.
   Do not depend on arbitrary Tailwind classes that are missing from the captured CSS bundle. */
.pack-hero {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .pack-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
  }
  .pack-hero .pack-art img {
    max-height: 28rem;
    width: 100%;
    object-fit: contain;
  }
}
.pack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.nf-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nf-page .nf-art {
  width: 13rem;
  max-width: 80%;
  margin-top: 1.75rem;
  height: auto;
}
@media (min-width: 640px) {
  .nf-page .nf-art { width: 16rem; }
}
@media (min-width: 1024px) {
  .nf-page { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .nf-page .nf-art { width: 14rem; margin-top: 1.5rem; }
}
.nf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.more-from-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .more-from-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .more-from-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}