.block-introduction {
    position: sticky;
    top: 0;
    padding: calc(64px + var(--custom-theme-site-header-height)) 82px 94px 64px;
    min-height: calc(100vh - var(--viewport-height-diff));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    --custom-theme-block-introduction-height: 100%;
    /* We use clip path so the block is hidden while we scroll */
    clip-path: polygon(0 0, 100% 0, 100% var(--custom-theme-block-introduction-height), 0 var(--custom-theme-block-introduction-height));
}
.block-introduction__scroll-ref {
    margin-bottom: 124px;
}
.block-introduction:first-child {
    margin-top: calc(-1 * var(--custom-theme-site-header-height));
}
.block-introduction__inner {
    position: relative;
    z-index: 1;
    width: var(--wp--style--global--content-size);
    max-width: 100%;
}

.block-introduction__media {
    position: absolute;
    inset: 0;
}
.block-introduction__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #30386C;
    opacity: 0.25;
}
.block-introduction__media video,
.block-introduction__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.block-introduction__content h1[data-type="core/heading"],
.block-introduction__content .block-h1 {
    margin-bottom: 10px;
}


.block-introduction__content h2[data-type="core/heading"],
.block-introduction__content .block-h2 {
    margin: 0;
}
.home .block-introduction__content .block-h2 {
    font-size: 3.75rem;
    line-height: 1.1;
}
.block-introduction__content {
    /* let some space for .block-introduction__highlighted-post */
    padding-right: calc(290px + 32px);
}

.block-introduction__highlighted-post {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 290px;
    padding: 24px;
    border: 1px solid #FFF;
    color: var(--wp--preset--color--grey-main);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.block-introduction__highlighted-post__image {
    display: block;
    margin: -24px -24px 6px -24px;
    width: calc(100% + 24px + 24px);
    height: auto;
    object-fit: cover;
    aspect-ratio: 288/172;
}
.block-introduction__highlighted-post__title {
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--wp--preset--color--blue);
    font-weight: 600;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 3.9em;
}
.block-introduction__highlighted-post__link {
    position: relative;
    text-decoration: none!important;
    align-self: flex-end;
    font-size: 0.875rem;
}
.block-introduction__highlighted-post__link::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 32px;
    border: 1px solid;
    width: 0;
    opacity: 0;
    transition: width 0.5s ease-out, opacity 0s 0.5s;
}
.block-introduction__highlighted-post__link:hover::before {
    width: calc(100% - 32px);
    opacity: 1;
    transition: width 0.5s ease-out;
}

@media screen and (max-width: 991px) {
    .block-introduction {
        padding: calc(64px + var(--custom-theme-site-header-height)) var(--wp--style--root--padding-left) 32px var(--wp--style--root--padding-right);
    }
    .block-introduction__scroll-ref {
        margin-bottom: 68px;
    }
    .block-introduction__inner {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }
    .block-introduction__highlighted-post {
        position: static;
        align-self: flex-end;
    }
    .block-introduction__content {
        padding-right: 0;
    }
    .block-introduction__content .block-h {
        margin-bottom: 24px;
    }
    .block-introduction__content .block-h1 img {
        width: 157px!important;
    }
    .home .block-introduction__content .block-h2 {
        font-size: clamp(2.25rem, 9.6vw, 48px);
    }
}