@layer components {
  /* =========================================
   Blog UI Refinement (SAN-3982)
   ========================================= */

  /* Breadcrumb */
  .c-breadcrumb__list {
    max-width: 1290px;

    @media screen and (max-width: 767px) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      li {
        margin-top: 8px;
        white-space: nowrap;

        a {
          display: inline-block;
        }

        &:last-child {
          overflow: hidden;
          text-overflow: ellipsis;
          min-width: 0;
          max-width: 100%;
        }
      }
    }
  }

  .l-contents__breadcrumb {
    margin-top: 0;
    padding-top: 32px;

    @media screen and (max-width: 767px) {
      padding: 8px 16px 0 16px;

      .c-breadcrumb {
        padding: 0;
      }
    }
  }

  .c-breadcrumb {
    margin-top: 0;
  }

  .c-breadcrumb__item {
    font-size: 15px;
    font-weight: bold;

    @media screen and (max-width: 767px) {
      font-size: 12px;
    }

    a {
      background: #fff;
      font-weight: bold;
      padding: 8px 16px;
      border-radius: 100px;
      text-decoration: none;

      &:hover {
        transition: all 0.4s;
        background: #1565c0;
        color: #fff;
        text-decoration: none;
      }
    }
  }
}