/*
 * BENEFITS B — EDITORIAL COLUMNS
 * Geen cards.
 * Desktop only.
 */
@media screen and (min-width: 969px) {

body.pb-benefits-variant-b .pb-vokk-why {
    padding-top: 105px !important;
    padding-bottom: 105px !important;
}

body.pb-benefits-variant-b .pb-vokk-benefits {
    counter-reset: pb-benefit !important;

    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;

    gap: 0 !important;

    margin-top: 58px !important;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-primary) 24%,
            transparent
        ) !important;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-dark) 12%,
            transparent
        ) !important;

    background: transparent !important;
}

body.pb-benefits-variant-b .pb-vokk-benefit {
    counter-increment: pb-benefit !important;

    position: relative !important;

    min-height: 240px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    padding: 38px 34px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}

body.pb-benefits-variant-b
.pb-vokk-benefit + .pb-vokk-benefit {
    border-left:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-dark) 10%,
            transparent
        ) !important;
}

body.pb-benefits-variant-b .pb-vokk-benefit::before {
    content: "0" counter(pb-benefit) !important;

    margin-bottom: 29px !important;

    color: var(--vokk-primary) !important;

}

body.pb-benefits-variant-b .pb-vokk-benefit-icon {
    display: none !important;
}

body.pb-benefits-variant-b .pb-vokk-benefit h3 {
    margin: 0 0 10px !important;

}

body.pb-benefits-variant-b .pb-vokk-benefit p {
    max-width: 260px !important;

    margin: 0 !important;

}

}