/*-- -------------------------- -->
<---          Breadcrumb        -->
<--- -------------------------- -*/

/* Mobile - 0px */
@media only screen and (min-width: 0px) {
  #breadcrumb {
    background: var(--white);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  }

  #breadcrumb .cs-container {
    width: 100%;
    max-width: 80rem; /* 1280px */
    margin: 0 auto;
    padding: 1rem; /* 16px top/bottom, 16px left/right */
  }

  #breadcrumb .cs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #breadcrumb .cs-breadcrumb-item {
    font-family: var(--headerFont);
    font-size: 1rem; /* 16px */
    font-weight: 400;
    color: var(--silver);
    display: flex;
    align-items: center;
  }

  #breadcrumb .cs-breadcrumb-item.cs-active {
    color: var(--navy);
    font-weight: 500;
  }

  #breadcrumb .cs-breadcrumb-link {
    color: var(--silver);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  #breadcrumb .cs-breadcrumb-link:hover {
    color: var(--navy);
  }

  #breadcrumb .cs-breadcrumb-sep {
    color: rgba(0, 0, 0, 0.2);
    font-size: 1rem; /* 16px */
    font-family: var(--headerFont);
    line-height: 1;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #breadcrumb .cs-container {
    padding: 1rem 2.5rem; /* 16px top/bottom, 40px left/right */
  }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #breadcrumb .cs-container {
    padding: 1rem 6vw; /* 16px top/bottom, 6vw left/right */
    max-width: 100%;
  }
}