/* Block */

.block-wrap {

    --block-padding: 30px;
    --block-border-radius: 9px;
    --block-gradient-color: var(--theme-primary-color, transparent);
    --block-padding-extra: 175px;


    position: relative;
    padding: var(--block-padding);

    &, & > .block-image {
        border-radius: var(--block-border-radius);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }


    & > .block-image {
        position: absolute;
        overflow: hidden;
        inset: 0;
        z-index: 2;

        &::before,
        &::after {
            content: ' ';
            position: absolute;
            inset: 0;
            z-index: 2;
        }

        &::before {
            background-color: rgba( 0, 0, 0, 0.2 );
        }

        &::after {
            background: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, var(--block-gradient-color) 100%);
        }

    }


    & > .block-content {
        display: flex;
        flex-direction: column;
        justify-content: end;
        position: relative;
        z-index: 10;
    }


    &.no-image {
        background-color: var(--theme-lighter);
    }


    &.has-image > .block-content {
        color: var(--theme-white);
    }


    .block-header {
        margin-bottom: 1rem;
    }

    .block-icon {
        margin-bottom: 1rem;
    }

    .block-title {
        margin-bottom: 1rem;
    }

    .block-actions {
        margin-top: 1.5rem;
    }

    .block-footer {
        margin-top: 1rem;
    }


}




/* Block Product */

.block-wrap.product-block {

    .block-actions {
        text-align: right;
        margin-top: 4rem;
    }

}






/* Block Article */

.block-wrap.article-block {

    & > .block-image {

        &::before {
            background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        }

        &::after {
            background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, var(--block-gradient-color) 100%);
        }

    }


    &.has-top .block-content {
        padding-top: var(--block-padding-extra);
    }



}