/* @group block-text
------------------------------------ */

.block-text {
    margin-top: calc(var(--border-stroke) * -2);
    margin-bottom: calc(var(--border-stroke) * -1);
    border-bottom: var(--border);
    position: relative;
}


.block-text :is(article, header) {
    display: flex;
    flex-direction: column;

}

.block-text article {
    gap: 4rem;
    text-align: center;
}

.block-text .img-box {
    margin-inline: auto;
}

.block-text a {
    transition: 0.5s;
}

.block-text p a {
    text-decoration: underline;
}

.block-text a:hover {
    color: var(--canvas-weave);
}

.block-text .decos .top {
    width: calc(100% + 4px);
    margin-inline: -2px;
}

.block-text :is(.left, .right) {
    width: 13.5rem;
}

.block-text :is(.left, .right) {
    width: 13.5rem;
}

.block-text header .img-box :is(img, #important) {
    object-fit: contain;
}

@media only screen and (min-width : 961px) {
    .block-text .decos {
        position: absolute;
        inset-block: 0;
        inset-inline: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .block-text .decos img {
        height: 100%;
    }

    .block-text,
    .block-text .decos-wrapper {
        height: 66.4rem;
    }

    .block-text header {
        gap: 2.5rem;
    }

    .block-text .img-box {
        width: 24.2rem;
    }

    .block-text article {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

}

@media only screen and (min-width : 0) and (max-width : 960px) {

    .block-text header {
        gap: 2.5rem;
    }

    .block-text article {
        padding-block: 7rem;
        max-width: 34rem;
        margin-inline: auto;
    }

    .block-text .img-box {
        width: 16.5rem;
    }


}

/* ANIMATIONS */
body:not(.wp-admin) .block-text header,
body:not(.wp-admin) .block-text .content {
    opacity: 0;
    --duration: 1.5s;
}

body:not(.wp-admin) .block-text.animateActive header,
body:not(.wp-admin) .block-text.animateActive .content {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

body:not(.wp-admin) .block-text.animateActive .content {
    --delay: 0.5s;
}

/* @end */