.expert-tip-block {
    margin: var(--font-lg) 0;
    margin-bottom: var(--font-xxl);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    --inner-tip-padding: var(--font-sm);
    width: 80%;

    --top-width: 60%;
    --top-secondary-ratio: 0.4;

    --bottom-secondary-ratio: 0.4;
    --bottom-offset: var(--font-lg);

    --stick-height: 8px;
    --stick-secondary-height: 16px;
    --stick-offset: 0px;
    --stick-primary: var(--ncs-cc-primary);
    --stick-secondary: color-mix(in srgb, var(--stick-primary) 50%, var(--background));

    @media (max-width: 768px) {
      width: 100%;
    }

    @media (max-width: 520px) {
      --top-width: 100%;
    }

    .tip-content
    {
        display: flex;
        flex-direction: column;
        gap: var(--font-xs);
        & > p, ol, ul, li, ol li, ul li, p:not(.blog-btn-box p)
        {
          line-height: var(--font-xl);
          font-size: var(--font-ml);
          margin: 0;
        }

        & > ol, & > ul
        {
          padding-left: var(--font-md);
        }
    }

  .tip-top, .tip-bottom
  {
      display: flex;
      flex-direction: row;
      gap: 12px;
  }

  .tip-top
  {
    margin-bottom: var(--inner-tip-padding);
    align-items: end;

    .tip-quotes
    {
      --quote-size: var(--font-xxl);
      margin: 0;
      width: var(--quote-size);
      height: var(--quote-size);
      mask-image: url("/static/blocks/expert-tip/quotes.svg");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: bottom center;
      background-color: var(--ncs-cc-primary);
    }

    .tip-top-containers
    {
      position: relative;
      flex: 1;

      & > div
      {
        position: absolute;
        left: 0;
        bottom: 0;
        height: var(--stick-height);
        border-radius: 1000px;
      }

      div:nth-child(2)
      {
        width: var(--top-width);
        background-color: var(--stick-primary);
      }

      div:nth-child(1)
      {
        width: calc(var(--top-width) * var(--top-secondary-ratio));
        bottom: var(--stick-offset);
        background-color: var(--stick-secondary);
        height: var(--stick-secondary-height);
      }
    }
  }

  .tip-bottom
  {
    margin-top: var(--inner-tip-padding);
    position: relative;
    gap: var(--font-xl);

    .tip-bottom-containers
    {
      flex: 1;
      position: relative;

      & > div
      {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 1000px;
      }

      div:nth-child(2)
      {
        width: 100%;
        background-color: var(--stick-primary);
        height: var(--stick-height);
      }

      div:nth-child(1)
      {
        width: calc(100% * var(--bottom-secondary-ratio));
        left: var(--bottom-offset);
        height: var(--stick-secondary-height);
        background-color: var(--stick-secondary);
      }
    }

    .tip-person
    {
      color: var(--stick-primary);
      .tip-person-name
      {
        font-size: var(--font-lg);
        font-weight: 600;
        margin: 0;
        line-height: var(--font-md);
      }

      .tip-person-title
      {
        position: absolute;
        top: 100%;
        right: 0;
        font-size: var(--font-md);
        margin: 0;
      }
    }
  }
}