.exterior-breadcrumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  gap: var(--size-space-800);
  padding: var(--size-space-300) var(--size-space-600);
  background-color: var(--basegrey-1);
  box-sizing: border-box;
}

.exterior-breadcrumb__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  gap: var(--size-space-200);
}

.exterior-breadcrumb__home {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-top: -1px;
  color: var(--thematertiary-700);
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  font-style: var(--body-2-font-style);
  font-weight: var(--body-2-font-weight);
  line-height: var(--body-2-line-height);
  letter-spacing: var(--body-2-letter-spacing);
  text-decoration: underline;
  white-space: nowrap;
}

.exterior-breadcrumb__separator {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
}

.exterior-breadcrumb__current {
  display: flex;
  align-items: center;
  width: fit-content;
  margin-top: -1px;
  color: var(--baseblack);
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  font-style: var(--body-2-font-style);
  font-weight: var(--body-2-font-weight);
  line-height: var(--body-2-line-height);
  letter-spacing: var(--body-2-letter-spacing);
  white-space: nowrap;
}