[data-template=modern] .content-cards-outer,
[data-template=natural] .content-cards-outer,
[data-template=neo] .content-cards-outer,
[data-template=organic] .content-cards-outer {
    --default-cta-size: 0.75rem;
    --default-cta-padding-block: 0.75rem;
    --default-bdr-w: 0px;
    --default-bdr-s: unset;
    --default-bdr-c: unset;
    --default-text-size: 1rem;
    --default-cta-bdr-s: solid
}

.card-block:before,
.content-cards-outer:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%
}

.card-block[data-url],
.cta-block {
    cursor: pointer
}

[data-template=modern] .content-cards-outer,
[data-template=neo] .content-cards-outer {
    --default-bg: var(--components-scroll-container-background, transparent);
    --default-block-bg: var(--content-blocks-item-background-color, transparent);
    --default-block-shadow: none;
    --default-block-radius: 2px;
    --default-title-color: var(--colors-text, black);
    --default-title-size: 2rem;
    --default-text-color: var(--colors-text, black);
    --default-block-pad-block: 2rem;
    --default-block-pad-inline: 2rem;
    --default-min-gap: 2.75rem;
    --default-columns: 4;
    --default-cta-padding-inline: 1.375rem;
    --default-cta-bg: var(--components-button-primary-background, var(--colors-primary, black));
    --default-cta-radius: 4px;
    --default-cta-bdr-w: 1px;
    --default-cta-bdr-c: var(--components-button-primary-border-color);
    --default-cta-font-c: var(--components-button-primary-text-hover, #fff);
    --default-cta-font-w: 900;
    --default-cta-shadow: var(--components-button-primary-shadow-hover)
}

[data-template=natural] .content-cards-outer,
[data-template=organic] .content-cards-outer {
    --default-bg: var(--colors-background, transparent);
    --default-block-bg: var(--colors-background, transparent);
    --default-block-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    --default-block-radius: 3px;
    --default-title-color: var(--colors-header-text, black);
    --default-title-size: 1.5rem;
    --default-text-color: var(--colors-header-text, black);
    --default-block-pad-block: 1.25rem;
    --default-block-pad-inline: 1.5rem;
    --default-min-gap: 1.5rem;
    --default-columns: 3;
    --default-cta-bg: var(--components-secondary-button-background-color, var(--colors-primary, black));
    --default-cta-font-w: 400;
    --default-cta-padding-inline: 1.5rem;
    --default-cta-bdr-c: var(--components-secondary-button-border-color)
}

[data-template=natural] .content-cards-outer {
    --default-cta-radius: var(--components-secondary-button-border-radius);
    --default-cta-bdr-w: var(--components-secondary-button-border-width);
    --default-cta-font-c: var(--components-secondary-button-text-color);
    --default-cta-shadow: unset
}

[data-template=organic] .content-cards-outer {
    --default-cta-radius: 4px;
    --default-cta-bdr-w: 0px;
    --default-cta-font-c: var(--colors-primary);
    --default-cta-shadow: 0px 7px 15px 0px rgba(30, 209, 178, 0.2)
}

[data-template=clarity] .content-cards-outer,
[data-template=classic] .content-cards-outer {
    --default-bg: var(--components-widget-background, var(--colors-background, transparent));
    --default-block-bg: var(--colors-background-secondary, transparent);
    --default-block-shadow: 0px 3px 9px 0px rgba(227, 222, 214, 0.51);
    --default-block-radius: 0px;
    --default-title-color: var(--colors-text, black);
    --default-title-size: 1.25rem;
    --default-title-color: var(--colors-text, black);
    --default-text-size: 1rem;
    --default-block-pad-block: 1.25rem;
    --default-block-pad-inline: 1rem;
    --default-min-gap: 1.5rem;
    --default-bdr-w: 0px;
    --default-bdr-s: unset;
    --default-bdr-c: unset;
    --default-columns: 3;
    --default-cta-padding-block: 0.625rem;
    --default-cta-padding-inline: 2rem;
    --default-cta-font-w: 600;
    --default-cta-shadow: none
}

[data-template=classic] .content-cards-outer {
    --default-cta-bg: var(--colors-secondary);
    --default-cta-radius: 0px;
    --default-cta-bdr-w: var(--components-button-border-width);
    --default-cta-bdr-s: solid;
    --default-cta-bdr-c: var(--colors-secondary);
    --default-cta-size: 1rem;
    --default-cta-font-c: var(--colors-secondary-contrast)
}

[data-template=clarity] .content-cards-outer {
    --default-cta-bg: transparent;
    --default-cta-radius: 4px;
    --default-cta-bdr-w: 1px;
    --default-cta-bdr-s: solid;
    --default-cta-bdr-c: var(--colors-secondary);
    --default-cta-size: 1.25rem;
    --default-cta-font-c: var(--colors-secondary)
}

[data-template=painter] .content-cards-outer,
[data-template=serene] .content-cards-outer {
    --default-bg: var(--colors-background-primary, transparent);
    --default-block-bg: var(--colors-background, transparent);
    --default-title-color: var(--colors-text, black);
    --default-text-size: 1rem;
    --default-min-gap: 1.5rem;
    --default-columns: 2;
    --default-cta-shadow: none;
    --default-cta-bdr-s: solid
}

[data-template=painter] .content-cards-outer {
    --default-block-shadow: unset;
    --default-block-radius: 0px;
    --default-title-color: var(--colors-primary, black);
    --default-title-size: 1.125rem;
    --default-block-pad-block: 1.5rem;
    --default-block-pad-inline: 1.5rem;
    --default-bdr-w: 2px;
    --default-bdr-s: solid;
    --default-bdr-c: var(--colors-secondary, #f2f2f2);
    --default-cta-padding-block: 1rem;
    --default-cta-padding-inline: 5rem;
    --default-cta-bg: var(--components-button-primary-background);
    --default-cta-radius: var(--components-button-border-radius);
    --default-cta-bdr-w: var(--components-button-primary-border-width, 0px);
    --default-cta-bdr-c: var(--components-button-primary-border-color);
    --default-cta-size: 1rem;
    --default-cta-font-c: var(--components-button-primary-text-color);
    --default-cta-font-w: 700
}

[data-template=serene] .content-cards-outer {
    --default-block-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    --default-block-radius: 3px;
    --default-title-color: var(--colors-text, black);
    --default-title-size: 1.25rem;
    --default-block-pad-block: 1.25rem;
    --default-block-pad-inline: 1rem;
    --default-bdr-w: unset;
    --default-bdr-s: unset;
    --default-bdr-c: unset;
    --default-cta-padding-block: 0.75rem;
    --default-cta-padding-inline: 2rem;
    --default-cta-bg: transparent;
    --default-cta-radius: 8px;
    --default-cta-bdr-w: 1px;
    --default-cta-bdr-c: var(--colors-primary);
    --default-cta-size: 1.125rem;
    --default-cta-font-c: var(--colors-primary);
    --default-cta-font-w: 500
}

.content-cards-outer {
    --columns: var(--default-columns, 4);
    --columns-break: calc(var(--columns) / 2);
    --columns-mobile: 1;
    --cards-min-gap: var(--default-min-gap, 1.25rem);
    --cards-inline-padding-mobile: 1rem;
    --container-width: calc((100% - (var(--columns) - 1) * var(--cards-min-gap)) / var(--columns));
    --cards-justification: center;
    --container-padding: var(--container-padding-block) var(--container-padding-inline);
    --container-padding-block: 4rem;
    --container-padding-inline: var(--cards-min-gap);
    --container-max-width: 100%;
    --container-effect: ;
    --container-bg: var(--default-bg, transparent);
    --container-bg-attachment: unset;
    --container-bg-top: transparent;
    --container-bg-top-opacity: 1;
    --container-bg-top-effect: var(--container-bg-effect);
    --container-bg-top-attachment: var(--container-bg-attachment);
    --container-min-height: auto;
    --card-block-padding: var(--card-block-padding-block) var(--card-block-padding-inline);
    --card-block-padding-block: var(--default-block-pad-block, 1.25rem);
    --card-block-padding-inline: var(--default-block-pad-inline, 1.25rem);
    --card-block-max-width: 100%;
    --card-block-bg-color: var(--default-block-bg, white);
    --card-block-border: var(--card-block-border-width) var(--card-block-border-style) var(--card-block-border-color);
    --card-block-border-width: var(--default-bdr-w, 0px);
    --card-block-border-style: var(--default-bdr-s, solid);
    --card-block-border-color: var(--default-bdr-c, black);
    --card-block-border-radius: var(--default-block-radius, 4px);
    --card-block-shadow: var(--default-block-shadow, rgba(100, 100, 111, 0.2) 0px 7px 29px 0px);
    --block-url-hover-effect: none;
    --block-url-active-effect: none;
    --block-url-hover-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px;
    --block-url-active-shadow: rgba(100, 100, 111, 0.1) 0px 7px 20px 0px;
    --card-block-fit: 100%;
    --card-block-image-max-width: 100%;
    --card-block-image-height: 300px;
    --card-block-image-margin-btm: var(--card-block-title-margin-block, 10px);
    --card-block-title-margin-block: 10px;
    --card-block-title-margin-inline: 10px;
    --card-block-title-margin-bottom: var(--card-block-title-margin-block);
    --card-block-title-margin-top: var(--card-block-title-margin-block);
    --card-block-title-size: var(--default-title-size, 2rem);
    --card-block-title-font: var(--typography-heading-font, sans-serif);
    --card-block-title-color: var(--default-title-color, var(--colors-text, black));
    --card-block-title-weight: 500;
    --card-block-paragraph-margin-block: 10px;
    --card-block-paragraph-margin-inline: 10px;
    --card-block-paragraph-margin-bottom: var(--card-block-paragraph-margin-block);
    --card-block-paragraph-margin-top: var(--card-block-paragraph-margin-block);
    --card-block-paragraph-size: var(--default-text-size, 1rem);
    --card-block-paragraph-font: var(--typography-regular-font, sans-serif);
    --card-block-paragraph-color: var(--default-title-color, var(--colors-text, black));
    --card-block-paragraph-weight: 400;
    --cta-justification: center;
    --cta-min-gap: var(--default-min-gap, 1.25rem);
    --cta-container-padding: var(--cta-container-padding-block) var(--cta-container-padding-inline);
    --cta-container-padding-block: 2rem;
    --cta-container-padding-inline: 1rem;
    --cta-block-padding: var(--cta-block-padding-block) var(--cta-block-padding-inline);
    --cta-block-padding-block: var(--default-cta-padding-block, 1rem);
    --cta-block-padding-inline: var(--default-cta-padding-inline, 1.5rem);
    --cta-bg: var(--default-cta-bg, var(--default-block-bg, black));
    --cta-radius: var(--default-cta-radius, var(--default-block-radius, 4px));
    --cta-border: var(--cta-border-width) var(--cta-border-style) var(--cta-border-color);
    --cta-border-width: var(--default-cta-bdr-w, var(--default-bdr-w, 0px));
    --cta-border-style: var(--default-cta-bdr-s, var(--default-bdr-s, solid));
    --cta-border-color: var(--default-cta-bdr-c, black);
    --cta-font-size: var(--default-cta-size, var(--default-title-size, 2rem));
    --cta-font: var(--typography-regular-font, sans-serif);
    --cta-font-color: var(--default-cta-font-c, white);
    --cta-font-weight: var(--default-cta-font-w, 600);
    --cta-shadow: var(--default-cta-shadow, rgba(100, 100, 111, 0.2) 0px 7px 29px 0px);
    --cta-bg-hover: var(--cta-bg);
    --cta-font-color-hover: var(--cta-font-color);
    --cta-bg-active: var(--cta-bg);
    --cta-font-color-active: var(--cta-font-color);
    width: calc(100% - calc(2 * var(--container-padding-inline)));
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--cards-justification);
    gap: var(--cards-min-gap);
    padding: var(--container-padding);
    position: relative;
    background: var(--container-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: var(--container-bg-attachment);
    filter: var(--container-effect)
}

.content-cards-outer:before {
    width: 100%;
    background: var(--container-bg-top);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: var(--container-bg-top-attachment);
    z-index: 0;
    filter: var(--container-bg-top-effect);
    opacity: var(--container-bg-top-opacity)
}

.card-block,
.card-block:before {
    background-color: var(--card-block-bg-color)
}

.content-cards-container {
    z-index: 1;
    margin-inline: auto;
    width: calc(var(--card-block-max-width) * var(--columns));
    max-width: var(--container-max-width);
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--cards-justification);
    gap: var(--cards-min-gap)
}

.card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--container-width);
    max-width: calc(var(--card-block-max-width) - calc(calc(var(--columns) - 1) * var(--cards-min-gap)));
    min-height: var(--container-min-height, 100%);
    box-shadow: var(--card-block-shadow)
}

.card-block {
    width: calc(100% - calc(2 * var(--card-block-padding-inline)));
    max-width: var(--card-block-max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: var(--card-block-border);
    border-radius: var(--card-block-border-radius);
    overflow: hidden;
    height: var(--card-block-fit);
    padding: var(--card-block-padding);
    position: relative
}

.card-block:before {
    z-index: 2;
    width: 100%
}

.card-block * {
    z-index: 3
}

.card-image {
    height: var(--card-block-image-height);
    max-width: var(--card-block-image-max-width);
    max-height: var(--card-block-image-height);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--card-block-image-margin-btm)
}

.card-image img {
    width: 100%;
    height: auto;
    max-height: 100%;
    max-width: 100%
}

.card-block p,
.card-block p.blockTitle {
    max-height: fit-content;
    text-align: center
}

.card-block p.blockTitle {
    margin: var(--card-block-title-margin-block) var(--card-block-title-margin-inline);
    font-size: var(--card-block-title-size);
    font-family: var(--card-block-title-font, sans-serif);
    color: var(--card-block-title-color, #000);
    font-weight: var(--card-block-title-weight, 500)
}

.card-block p {
    margin: var(--card-block-paragraph-margin-block) var(--card-block-paragraph-margin-inline);
    font-size: var(--card-block-paragraph-size);
    font-family: var(--card-block-paragraph-font, sans-serif);
    color: var(--card-block-paragraph-color, #000);
    font-weight: var(--card-block-title-weight, 400);
    margin-top: var(--card-block-paragraph-margin-top);
    margin-bottom: var(--card-block-paragraph-margin-bottom)
}

.card-block[data-url]:hover:before {
    filter: var(--block-url-hover-effect)
}

.card-block[data-url]:active:before {
    filter: var(--block-url-active-effect)
}

.card-container:has(> .card-block[data-url]):hover {
    filter: var(--block-url-hover-effect);
    box-shadow: var(--block-url-hover-shadow)
}

.card-container:has(> .card-block[data-url]):active {
    filter: var(--block-url-active-effect);
    box-shadow: var(--block-url-active-shadow)
}

.cta-container {
    z-index: 3;
    width: 100%;
    display: flex;
    justify-content: var(--cta-justification);
    flex-wrap: wrap;
    gap: 1rem;
    padding: var(--cta-container-padding-block, 2rem) var(--cta-container-padding-inline, 2rem)
}

.cta-block {
    padding: var(--cta-block-padding);
    background: var(--cta-bg);
    border: var(--cta-border);
    border-radius: var(--cta-radius);
    text-decoration: none;
    font-size: var(--cta-font-size);
    font-family: var(--cta-font);
    color: var(--cta-font-color);
    font-weight: var(--cta-font-weight);
    box-shadow: var(--cta-shadow)
}

.cta-block:hover {
    background: var(--cta-bg-hover);
    color: var(--cta-font-color-hover);
    filter: var(--block-url-hover-effect);
    box-shadow: var(--block-url-hover-shadow)
}

.cta-block:active {
    background: var(--cta-bg-active);
    color: var(--cta-font-color-active);
    filter: var(--block-url-active-effect);
    box-shadow: var(--block-url-active-shadow)
}

@media only screen and (max-width:960px) {
    .content-cards-outer {
        --container-width: calc((100% - (var(--columns-break) - 1) * var(--cards-min-gap)) / var(--columns-break)) !important
    }
    .card-container {
        max-width: calc(var(--card-block-max-width) - calc(calc(var(--columns-break) - 1) * var(--cards-inline-padding-mobile)))
    }
}

@media only screen and (max-width:767px) {
    .content-cards-outer {
        --container-width: calc((100% - (var(--columns-mobile) - 1) * var(--cards-min-gap)) / var(--columns-mobile)) !important;
        --card-block-max-width: 100%
    }
    .card-container {
        max-width: calc(var(--card-block-max-width) - calc(calc(var(--columns-mobile) - 1) * var(--cards-inline-padding-mobile)))
    }
}