/* Uniform, full-width home rails. Loaded after the generated Tailwind bundle. */
.pb-12 > .mt-6 {
  --nc-rail-gap: 12px;
  margin-top: 0;
}

.pb-12 > .mt-6 > [class*="px-4"][class*="mb-8"] {
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  background: linear-gradient(90deg, rgba(229, 9, 20, 0.025), transparent 38%);
}

.pb-12 > .mt-6 > [class*="px-4"][class*="mb-8"]:nth-child(even) {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 42%);
}

.pb-12 > .mt-6 > [class*="px-4"][class*="mb-8"] > [class*="items-center"][class*="mb-3"],
.pb-12 > .mt-6 > [class*="px-4"][class*="mb-8"] > h2 {
  min-height: 28px;
  margin-bottom: 12px;
}

.pb-12 > .mt-6 [class*="overflow-x-auto"][class*="gap-3"] {
  gap: var(--nc-rail-gap);
  justify-content: flex-start;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  overscroll-behavior-inline: contain;
}

.pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] {
  width: auto !important;
  min-width: 0;
  flex: 0 0 calc((100% - 108px) / 10);
  scroll-snap-align: start;
}

.pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] > [class*="mt-1.5"] {
  min-height: 34px;
}

@media (max-width: 1599px) {
  .pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] {
    flex-basis: calc((100% - 84px) / 8);
  }
}

@media (max-width: 1279px) {
  .pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] {
    flex-basis: calc((100% - 72px) / 7);
  }
}

@media (max-width: 1023px) {
  .pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] {
    flex-basis: calc((100% - 60px) / 6);
  }
}

@media (max-width: 899px) {
  .pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] {
    flex-basis: calc((100% - 48px) / 5);
  }
}

@media (max-width: 639px) {
  .pb-12 > .mt-6 {
    --nc-rail-gap: 10px;
  }

  .pb-12 > .mt-6 > [class*="px-4"][class*="mb-8"] {
    padding-top: 16px;
    padding-bottom: 22px;
  }

  .pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] {
    flex-basis: calc((100% - 20px) / 3);
  }
}

@media (max-width: 419px) {
  .pb-12 > .mt-6 [class*="overflow-x-auto"] > a[class*="flex-shrink-0"][class*="w-36"] {
    flex-basis: calc((100% - 10px) / 2);
  }
}