/* The region contains two independent blocks: photo hero, then TPG trail. */
.breadcrumbs {
  margin: 0;
}

.breadcrumbs > * {
  margin-block: 0;
}

.breadcrumb-hero {
  background-color: var(--tpg-color-surface);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 18.125rem;
  overflow: hidden;
  position: relative;
}

.breadcrumb-hero__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding-block: var(--tpg-space-6);
  position: relative;
  text-align: center;
  z-index: 1;
}

:root[data-theme="dark"] .tpg-breadcrumbs {
  background: #0b1220;
  color: var(--tpg-color-text-muted);
}

:root[data-theme="dark"] .tpg-breadcrumbs__item:not(:last-child)::after {
  color: #71809a;
}

:root[data-theme="dark"] .tpg-breadcrumbs a:hover,
:root[data-theme="dark"] .tpg-breadcrumbs a:focus-visible {
  background: #172033;
  color: var(--tpg-color-text);
}

:root[data-theme="dark"] .tpg-breadcrumbs__current {
  color: var(--tpg-color-text);
}

@media (max-width: 61.999rem) {
  .breadcrumb-hero {
    min-height: 10rem;
  }

  .breadcrumb-hero__inner {
    padding-block: var(--tpg-space-5);
  }
}