/***************************************
* Feature box grid
****************************************/
.vii-feature-box-grid {
    --grid-gap-x:24px;
    --grid-gap-y:24px;
    --vii-item-shadow:var(--vii-box-shadow-1);
    --vii-item-shadow-hover:var(--vii-box-shadow-2);

    max-width:842px;
}
.vii-feature-box-grid__item {
    padding:32px 24px;
    box-shadow:var(--vii-item-shadow);
    aspect-ratio:410/270;
}
.vii-feature-box-grid__item-image {width:120px;}
.vii-feature-box-grid__item-image:has( + :is(.vii-feature-box-grid__item-title, .vii-feature-box-grid__item-button)) {
    margin-bottom:24px;
}
.vii-feature-box-grid__item-title + .vii-feature-box-grid__item-button {margin-top:12px;}

/*  txt_color_white */
.txt_color_white .vii-feature-box-grid__item {
    --vii-color-heading:var(--vii-color-text);

    color:var(--vii-color-text);
}

/* hover, focus */
a.vii-feature-box-grid__item:is(:hover, :focus) {
    box-shadow:var(--vii-item-shadow-hover);
}


/***************************************
* Feature box grid responsive
****************************************/
@media only screen and (min-width:1700px) {
    .vii-feature-box-grid {max-width:65.78%;}
    .vii-feature-box-grid__item {padding:48px 32px;}
    .vii-feature-box-grid__item-image {width:29.34%;}
}
@media only screen and (min-width:769px) {
    .vii-feature-box-grid {--grid-col:2;}
}
@media only screen and (max-width:1024px) {
    .vii-feature-box-grid {
        --grid-gap-x:var(--vii-gap-container);
        --grid-gap-y:var(--vii-gap-container);
    }
    .vii-feature-box-grid__item {
        padding:var(--vii-gap-container);
    }
}
@media only screen and (min-width:481px) and (max-width:768px) {
    .vii-feature-box-grid__item-button {
        max-width:200px;
    }
}