//need tio insert less padding in case of mobile view handle with media queries mobile api failing
//   need to discuss about at child level otherwise content will be much more and it looks bad max-height: 102px;overflow: hidden;

.nw-title-description-container {
  align-items: center;//it better to match container with  baseline (not align-items: center;) -- by default good for mobile view
  display: flex;
  margin-top: 16px;
  min-height: 1px; //need to talk with prashant for how long text should be it better to remove max-height =100px
  padding: 16px 32px; //top padding was breaking in mobile view when title was long
  background-color: $concrete;
  word-wrap: break-word; //overflow-wrap: break-word; need to understand both if someone insert long text

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

  @media screen and (max-width: $screen-max-xs) {
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px;
  }
}

.nw-title-border {
  flex-wrap: wrap;
  flex: 0 0 auto;
  overflow: hidden;
  margin: 0;
  border-right: 2px solid;
  max-height: 54px;
  padding-right: 32px; //need to insert one border after title
  font-size: $font-size-xxl;
  font-family: $secondary-font-family;


  @media screen and (max-width: 350px) {
    max-height: 58px;
    padding-right: 16px;
  }
  @media screen and (max-width: $screen-max-xs) {
    border-right: 0;
    max-width: 100%;
    width: 100%;
    max-height: 58px;
    padding: 0;
    font-size: $font-size-xxxl;
  }
}

.nw-block-description {
  padding: 0 32px;
  font-size: $font-size-sm;

  @media screen and (max-width: 350px) {
    padding: 0 16px;
  }
  @media screen and (max-width: $screen-max-xs) {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    padding: 0;
  }
}

.nw-cmt-mobiletitleborder {
  margin: 14px 0 16px;
  border-bottom: 2px solid $default-color;
  width: 80px;
}