:root {
    --white-border-color: #ffffff29;
    --dark-border-color: #031b3129;
}

.benefits-section.hidden {
    display: none;
}

.benefit-item img {
    margin-bottom: 24px;
}

.benefit-details {
    font-size: 18px;
}

.benefits-section.bg-dark {
    color: white !important;
}

@media (max-width: 767px) {
    .benefit-item:not(:last-child) {
        border-bottom: 1px solid var(--dark-border-color);
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .bg-dark .benefit-item:not(:last-child) {
        border-color: var(--white-border-color);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .benefits-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .benefit-item {
        margin-bottom: 0;
        padding: 24px 0;
    }

        .benefit-item:nth-child(odd) {
            padding-right: 24px;
            border-right: 1px solid var(--dark-border-color);
        }

        .benefit-item:nth-child(even) {
            padding-left: 24px;
        }

        .benefit-item:nth-child(1),
        .benefit-item:nth-child(2) {
            min-height: 156px;
            padding-top: 0;
        }

        .benefit-item:nth-child(7),
        .benefit-item:nth-child(8) {
            padding-bottom: 0;
        }

        .benefit-item:nth-child(1),
        .benefit-item:nth-child(2),
        .benefit-item:nth-child(3),
        .benefit-item:nth-child(4),
        .benefit-item:nth-child(5),
        .benefit-item:nth-child(6) {
            border-bottom: 1px solid var(--dark-border-color);
        }
}

@media (min-width: 992px) and (max-width: 1229px) {
    .benefits-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .benefit-item:nth-child(1),
    .benefit-item:nth-child(2),
    .benefit-item:nth-child(3),
    .benefit-item:nth-child(4),
    .benefit-item:nth-child(5),
    .benefit-item:nth-child(6) {
        border-bottom: 1px solid var(--dark-border-color);
        padding-bottom: 24px;
    }

    .benefit-item:nth-child(1),
    .benefit-item:nth-child(2),
    .benefit-item:nth-child(4),
    .benefit-item:nth-child(5),
    .benefit-item:nth-child(7),
    .benefit-item:nth-child(8) {
        border-right: 1px solid var(--dark-border-color);
        padding-right: 24px;
    }

    .benefit-item:not(:last-child) {
        margin-bottom: 0;
    }

    .benefit-item:nth-child(7),
    .benefit-item:nth-child(8),
    .benefit-item:nth-child(9) {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .benefit-item:nth-child(4),
    .benefit-item:nth-child(5),
    .benefit-item:nth-child(6),
    .benefit-item:nth-child(7),
    .benefit-item:nth-child(8),
    .benefit-item:nth-child(9) {
        padding-top: 24px;
    }

    .benefit-item:nth-child(2),
    .benefit-item:nth-child(5),
    .benefit-item:nth-child(8),
    .benefit-item:nth-child(3),
    .benefit-item:nth-child(6),
    .benefit-item:nth-child(9) {
        padding-left: 24px;
    }
}

@media (min-width: 1230px) {
    .benefits-desc {
        max-width: 574px;
    }

    .benefits-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .benefit-item:nth-child(1),
    .benefit-item:nth-child(2),
    .benefit-item:nth-child(3),
    .benefit-item:nth-child(4) {
        padding-bottom: 24px;
        border-bottom: 1px solid var(--dark-border-color);
    }

    .benefit-item:nth-child(1),
    .benefit-item:nth-child(2),
    .benefit-item:nth-child(3),
    .benefit-item:nth-child(5),
    .benefit-item:nth-child(6),
    .benefit-item:nth-child(7) {
        padding-right: 20px;
        border-right: 1px solid var(--dark-border-color);
    }

    .benefit-item:nth-child(2),
    .benefit-item:nth-child(3),
    .benefit-item:nth-child(4),
    .benefit-item:nth-child(6),
    .benefit-item:nth-child(7),
    .benefit-item:nth-child(8) {
        padding-left: 20px;
    }

    .benefit-item:nth-child(5),
    .benefit-item:nth-child(6),
    .benefit-item:nth-child(7),
    .benefit-item:nth-child(8) {
        padding-top: 24px;
    }
}

@media (min-width: 1920px) {
    .benefits-section {
        padding: 120px var(--padding-xl) 150px var(--padding-xl);
    }
}

.bg-dark .benefit-item {
    border-color: var(--white-border-color);
}