.container-intro-primary {
    --ease-inout-quad: cubic-bezier(0.45, 0, 0.55, 1);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    max-width: 1210px;
    padding: 50px 20px;
    margin: 0 auto;
    color: var(--gray-dark);
}

.container-intro-primary .contentRender_name_plugins_core_textbox {
    padding: 0;
}

.container-intro-primary .contentRender_name_plugins_core_textbox h1 {
    margin-bottom: 0.4em;
    font-family: var(--magnesium);
    font-weight: normal;
    font-size: 43px;
    line-height: calc(45/43);
    text-transform: uppercase;
    color: inherit;
}

.container-intro-primary .contentRender_name_plugins_core_textbox p {
    font-family: var(--pt-sans);
    font-weight: normal;
    font-size: 17px;
    line-height: calc(30/17);
    color: inherit;
}

.container-intro-primary .contentRender_name_plugins_core_textbox *:last-child {
    margin-bottom: 0;
}

@media (min-width: 40em) {
    .container-intro-primary {
        grid-template: auto / 50% minmax(0, 1fr);
        align-items: center;
        gap: 30px;
    }
}

@media (min-width: 64em) {
    .container-intro-primary {
        gap: 50px;
    }

    .container-intro-primary .contentRender_name_plugins_core_textbox :is(h1, h2, h3, h4, h5, h6) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .container-intro-primary .contentRender_name_plugins_core_textbox :is(h1, h2, h3, h4, h5, h6):last-of-type {
        margin-bottom: .35em;
    }

    .container-intro-primary .contentRender_name_plugins_core_textbox h1 {
        margin-bottom: 0;
        font-size: 54px;
        line-height: calc(29/27);
    }

    .container-intro-primary .contentRender_name_plugins_core_textbox p {
        font-size: 19px;
        line-height: 2;
    }

    .container-intro-primary .heading-stripe {
        position: relative;
        display: block;
        padding: 0 5px;
        overflow: hidden;
    }

    /*----- animated heading -----*/

    .container-intro-primary .stripe-block {
        position: absolute;
        inset: 0;
        z-index: 2;
        transform: translateX(-101%);
        display: block;
        background: var(--blue);
        pointer-events: none;
    }    

    .container-intro-primary .stripe-inner {
        position: relative;
        z-index: 1;
        opacity: 0;
        transition: opacity var(--transition);
    }

    /* intersected */

    .container-intro-primary.intersected .stripe-inner {
        opacity: 1;
    }

    .container-intro-primary.intersected .stripe-block {
        animation-name: color-swipe;
        animation-duration: 1s;
        animation-timing-function: var(--ease-inout-quad);
        animation-fill-mode: forwards;
    }
}

@keyframes color-swipe {
    0% {
        transform: translateX(-101%);
    }
    40% {
        transform: translateX(0%);
    }
    60% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(101%);
    }
}