/* Grid Services */
.grid-cards {
    display: var(--vcl-gc-d, grid);
    grid-template-columns: var(--vcl-gc-gtc, var(--grid-cards-col, repeat(3, 1fr)));
    gap: var(--vcl-gc-g, 24px);
}

.grid-cards:hover .grid-cards_item {
    opacity: var(--vcl-gc-hover-item-o, 0.8);
}

.grid-cards:hover .grid-cards_item:hover {
    opacity: 1;
    transform: var(--vcl-gc-hover-item-hover-tsf, translateY(-7px));
}

.grid-cards_item {
    position: var(--vcl-gc-item-position, relative);
    display: var(--vcl-gc-item-display, flex);
    flex-direction: var(--vcl-gc-item-flex-d, column);
    align-items: var(--vcl-gc-item-align-i, unset);
    justify-content: var(--vcl-gc-item-justify-c, center);
    color: var(--vcl-gc-item-c, var(--color-dark));
    background-color: var(--vcl-gc-item-bg, var(--color-neutral-0));
    border: var(--vcl-gc-item-b, 1px solid var(--color-neutral-300));
    border-width: var(--vcl-gc-item-border-w, 1px);
    border-color: var(--vcl-gc-item-border-c, var(--color-neutral-300));
    padding: var(--vcl-gc-item-p, 32px);
    border-radius: var(--vcl-gc-item-br, 12px);
    text-align: var(--vcl-gc-item-ta, var(--grid-card-text-align, left));
    transition: var(--vcl-gc-item-tsn, all 0.25s ease-in-out);
    min-height: var(--vcl-gc-item-min-h, auto);
    box-shadow: var(--vcl-gc-item-box-sh, none);
    overflow: var(--vcl-gc-item-box-overflow, hidden);
}

.grid-cards_item > * {
    z-index: 1;
}

.grid-cards_item-bg {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: var(--vcl-gc-item-bg-size, contain);
    opacity: var(--vcl-gc-item-bg-opacity, 0.8);
    z-index: 0;
}

.grid-cards_item-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--vcl-gc-item-bg-before-grad, linear-gradient(
        to bottom, 
        rgba(255,255,255,1) 0%, 
        rgba(255,255,255,0.92) 50%,
        rgba(255,255,255,0.45) 70%,
        rgba(255,255,255,0.5) 100%
    ));
}

.grid-cards_item .grid-cards_item-header {
    margin-bottom: var(--vcl-gc-item-header-mb, 1rem);
}

.grid-cards_item .grid-cards_item-header.align-beside {
    display: var(--vcl-gc-item-header_align-beside-display, flex);
    align-items: var(--vcl-gc-item-header_align-beside-align-i, center);
    gap: var(--vcl-gc-item-header_align-beside-gap, 12px);
}

.grid-cards_item .grid-cards_item-headings {
    display: var(--vcl-gc-item-headings-display, flex);
    flex-direction: var(--vcl-gc-item-headings-flex-d, column);
    gap: var(--vcl-gc-item-headings-gap, 5px);
}

.grid-cards_item h3 {
    color: var(--vcl-gc-item-h3-c);
    margin-bottom: var(--vcl-gc-item-h3-mb, 0px);
    font-size: var(--vcl-gc-item-h3-fs, 1.125rem);
}

.grid-cards_item p {
    color: var(--vcl-gc-item-p-color, var(--vcl-gc-item-c));
    font-size: var(--vcl-gc-item-p-fs, 14px);
    line-height: var(--vcl-gc-item-p-lh, 1.6);
    opacity: var(--vcl-gc-item-p-opacity, 0.85);
    margin-bottom: var(--vcl-gc-item-p-mb, 0px);
}

.grid-cards_item p.sub {
    font-weight: 600;
    color: var(--vcl-gc-item-psub-c);
    margin-bottom: var(--vcl-gc-item-psub-mb, 0px);
    font-size: var(--vcl-gc-item-p-fs, 1rem);
}

.grid-cards_item-icon {
    width: var(--vcl-gc-item-ico-sz, 54px);
    height: var(--vcl-gc-item-ico-sz, 54px);
    min-width: var(--vcl-gc-item-ico-sz, 54px);
    min-height: var(--vcl-gc-item-ico-sz, 54px);
    background: var(--vcl-gc-item-ico-bg, var(--color-primary-400));
    border-radius: var(--vcl-gc-item-ico-br, 8px);
    display: var(--vcl-gc-item-ico-d, flex);
    align-items: var(--vcl-gc-item-ico-ai, center);
    justify-content: var(--vcl-gc-item-ico-jc, center);
    border: var(--vcl-gc-item-ico-b, none);
    color: var(--vcl-gc-item-ico-c, white);
    margin-left: var(--vcl-gc-item-ico-ml, var(--grid-card-icon-left, 0));
    margin-right: var(--vcl-gc-item-ico-mr, var(--grid-card-icon-right, 0));
}

.grid-cards_item .grid-cards_item-header.align-below .grid-cards_item-icon {
    margin-bottom: var(--vcl-gc-item-ico-mb, 1.5rem);
}

@media (max-width: 1023px) {
    .grid-cards:not(.--col-1) {
        --vcl-gc-gtc: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .grid-cards {
        --vcl-gc-gtc: 1fr !important;
    }
}