@media (max-width: 768px) {
      .breadcrumb {
          font-size: 0.8rem;
          margin-bottom: 1.5rem;

          .current-page {
              max-width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
          }
      }
  }

  .breadcrumb {
      margin-bottom: 2rem;
      display: flex;
      justify-content: center;

      .menubar {
          width: fit-content;
          max-width: 100%;
          background: var(--primary-color);
          border-radius: 60px;
          box-shadow: 4px 6px 6px 0px rgba(0, 0, 0, 0.125);
          padding: 0.5rem 1rem;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          flex-wrap: wrap;

          @media (max-width: 768px) {
              font-size: 0.9rem;
              padding: 0.4rem 0.8rem;
          }

          .back-btn {
              color: #fff;
              display: flex;
              align-items: center;
              gap: 0.5rem;
              transition: 250ms ease-in-out;

              &:hover {
                  color: #000;
              }

              svg {
                  width: 20px;
                  height: 20px;
                  min-width: 20px;
              }

              .back-text {
                  @media (max-width: 480px) {
                      display: none;
                  }
              }
          }

          .separator {
              color: #fff;
              opacity: 0.7;
          }

          .current-page {
              color: #fff;
              font-weight: 500;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
          }
      }
  }