.breadcrumbs {
  max-width: 100%;
  overflow-x: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.breadcrumbs > ul,
.breadcrumbs > ol {
  display: flex;
  align-items: center;
  white-space: nowrap;
  min-height: min-content;
}

.breadcrumbs > ul > li,
.breadcrumbs > ol > li {
  display: flex;
  align-items: center;
}

.breadcrumbs > ul > li > a,
.breadcrumbs > ol > li > a {
  display: flex;
  cursor: pointer;
  align-items: center;
}

@media (hover: hover) {
  .breadcrumbs > ul > li > a:hover,
  .breadcrumbs > ol > li > a:hover {
    text-decoration-line: underline;
  }
}

.breadcrumbs {
  max-width: 100%;
  overflow-x: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.breadcrumbs > ul,
.breadcrumbs > ol {
  display: flex;
  align-items: center;
  white-space: nowrap;
  min-height: min-content;
}

.breadcrumbs > ul > li,
.breadcrumbs > ol > li {
  display: flex;
  align-items: center;
}

.breadcrumbs > ul > li > a,
.breadcrumbs > ol > li > a {
  display: flex;
  cursor: pointer;
  align-items: center;
}

@media (hover: hover) {
  .breadcrumbs > ul > li > a:hover,
  .breadcrumbs > ol > li > a:hover {
    text-decoration-line: underline;
  }
}

.carousel {
  display: inline-flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-vertical {
  flex-direction: column;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.carousel-item {
  box-sizing: content-box;
  display: flex;
  flex: none;
  scroll-snap-align: start;
}

.carousel-center .carousel-item {
  scroll-snap-align: center;
}

.carousel-end .carousel-item {
  scroll-snap-align: end;
}

/* Override class 18-24px range */
@media (max-width: 600px) {
  .size-2xl {
    font-size: 15px;
  }
}