.checkboxes-holder  {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.checkboxes-holder .box {
    width: calc(1/2*100% - (1 - 1/2)*30px);
    background-color: #fff;
    box-shadow: var(--box-shadow);
    border-radius: 6px;
    overflow: hidden;
    font-weight: 700;
    padding: 24px 20px 24px 70px;
    transition: 0.3s;
    position: relative;
}

.checkboxes-holder .box:before {
    font-family: 'serviceos' !important;
    content: "\e905";
    position: absolute;
    left: 20px;
    top: 20px;
    color: var(--checkbox-color);
    background: var(--checkbox-bkg-color);
    width: 32px;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    line-height: 32px;
    font-size: 14px;
    border-radius: 3px;
}

.checkboxes-holder .box:hover:before {
    background-color:  var(--checkbox-color);
    color: #fff;
}

.per-row-3 .box {
    width: calc(1/3*100% - (1 - 1/3)*30px);
}

.per-row-4 .box {
    width: calc(1/4*100% - (1 - 1/4)*30px);
}


@media screen and (max-width: 767px) {
    .checkboxes-holder .box {
        width: 100%;
    }
}