
.view .view-header {

    h2 {
      font-size: var(--fc-h1);
      font-weight: var(--fw-bold);
      color: var(--blue-dark-1);
      font-family: var(--ff-display1);
      text-wrap: balance;
      line-height: 1;
      width: 100%;
    }

    h3 {
        font-size: var(--fc-h3);
        font-weight: var(--fw-extrabold);
        font-family: var(--ff-sans2);
        color: var(--blue-dark-1);
        line-height: 1;
    }

    p {
        font-size: var(--fc-p2);
        font-weight: var(--fw-normal);
        color: var(--black);
        font-family: var(--ff-sans1);
        margin-bottom: 0;
    }

    a {
      color: var(--blue-light-1);
      text-decoration-line: underline;
      text-decoration-color: var(--blue-light-2);
      text-decoration-thickness: 2px;
      text-underline-offset: var(--margin-xxs);
      text-decoration-skip-ink: auto;
    }

    ul {
      padding-left: var(--margin-s);
      margin-bottom: 0;
      list-style: none;
    }  

    ol {
      list-style-type: decimal;

      margin-left: var(--margin-s);
      padding-left: var(--margin-l);

      & > li {
          list-style-type: decimal;
      }
      
    }

    ul > li::before {
        content: '';
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231c58de" class="size-6"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" /></svg>');
        background-position:  center center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: var(--margin-s);
        position: relative;
        top: 0;
        transform: translateY(0.2rem);
        left: 0;
        color: var(--blue-base);

        width: var(--fs-p2);
        height: var(--fs-p2);
        display: inline-block;
        margin-left: var(--margin-s);
        
    }

    ul > li,
        ol > li {
        font-size: var(--fc-p2);
        font-weight: var(--fw-normal);
        color: var(--black);
        font-family: var(--ff-sans1);
        margin-bottom: var(--margin-s);
    }

    hr {
        margin: 0 0;
        color: var(--grey-dark-2);
        border: 0;
        border-top: 1px solid var(--grey-dark-2);
        background-color: var(--grey-dark-2);
        opacity: 0.8;
        height: 2px;
        width: 100%;
        border-radius: var(--br-m);
    }

    blockquote {
        background-color: var(--grey-light-2);
        padding: var(--margin-l) var(--margin-l);
        border-radius: var(--br-m);
    }

    blockquote p:last-of-type {
        margin-bottom: 0;
    }

    blockquote p {
        font-size: var(--fc-h3);
        color: var(--blue-dark-1);
        font-style: oblique;
        text-align: center;
        text-wrap: pretty;
    }

     .button {
        border-radius: var(--br-m);
        background-color: var(--blue-light-1);
        color: var(--white);
        font-weight: var(--fw-bold);
        padding: var(--margin-m) var(--margin-l);
        text-decoration: none;
        text-wrap: balance;
        display: inline-block;
        margin-bottom: var(--margin-m);

        &.primary {
            background-color: var(--blue-base);
            color: var(--white);
        }

        &.secondary {
            background-color: var(--green-dark);
            color: var(--white);
        }

        &.outline {
            background-color: transparent;
            border: 2px solid var(--blue-light-1);
            color: var(--blue-base);
        }
    }
}




/* Custom Block Header (for the block display) */
.view-header-custom {
    text-align: center;
    margin-bottom: var(--margin-l);
    padding: var(--margin-m);
    background-color: var(--grey-light-2);
    border-radius: var(--br-s);
}

.view-header-custom h2 {
    font-family: var(--ff-serif1);
    font-size: var(--fc-h2);
    color: var(--blue-base);
    margin-bottom: var(--margin-xs);
    text-transform: uppercase;
}

.view-header-custom p {
    font-family: var(--ff-sans1);
    color: var(--grey-dark-2);
    margin: 0;
}