.wp-block-ucla-wordpress-plugin-ribbon {
  .ucla-ribbon--brand {
    font-size: 1.5rem;
    line-height: 1.35;
    // max-width: 15ch;

    @media (min-width: 768px) {
      font-size: 3rem;
      line-height: 1.33;
    }

    .ucla-ribbon__text {
      color: #ffffff;
      font-size: inherit;
      line-height: inherit;
      background-color: #2774ae;
      box-shadow: 8px 0 0 #2774ae;
      padding: 1px 0 1px 8px;
      margin-left: 8px;

      @media (min-width: 768px) {
        box-shadow: 10px 0 0 #2774ae;
        padding: 2px 0 2px 12px;
        margin-left: 0px;
      }
    }
  }

  

  .ucla-ribbon--highlight {
    font-size: 1.125rem;
    line-height: 2.2;
    // max-width: 25ch;

    @media (min-width: 960px) {
      font-size: 1.5rem;
      line-height: 2;
    }

    .ucla-ribbon__text {
      font-size: inherit;
      line-height: inherit;
      padding: 8px 0 8px 12px;
      background-color: #ffd100;
      box-shadow: 10px 0 0 #ffd100;
    }
  }

  .ucla-ribbon__text {
    white-space: unset !important;
    font-weight: bold;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  &.has-text-align-right {
    .ucla-ribbon--brand .ucla-ribbon__text {
      padding: 1px 8px 1px 0;
      box-shadow: -8px 0 0 #2774ae;
      margin-right: 8px;

      @media (min-width: 768px) {
        padding: 2px 12px 2px 0;
        box-shadow: -12px 0 0 #2774ae;
        margin-right: 0;
      }
    }
    .ucla-ribbon--highlight .ucla-ribbon__text {
      padding: 8px 12px 8px 0;
      box-shadow: -12px 0 0 #FFD100;
      margin-right: 10px;

      @media (min-width: 768px) {
        margin-right: 0;
      }
    }
  }
}
