.benefits-component {
    display: grid;
    gap: 30px;
    color: var(--benefits-color)
}

.benefits-component.per-row-2 {
    grid-template-columns: 1fr 1fr;
}

.benefits-component.per-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.benefits-component.per-row-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.benefits-component.per-row-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.benefits-component.align-centered {
    text-align: center;
}

.benefits-component.align-left {
    text-align: left;
}

.benefits-component .benefit {
    position: relative;
}

.benefits-component .image {
    position: relative;
}

.benefits-component .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.image-position-inline .benefit {
    display: inline-flex;
    align-items: flex-start; 
    gap: 15px;
}

.image-position-inline .benefit .image {
    width: 45px;
    min-width: 45px;
    height: auto;
}

.image-position-top .benefit .text { 
    margin-top: 15px;
}

.image-position-top .benefit .image { 
    width: 60px;
    height: 60px;
}

.image-position-top.align-centered .benefit .image { 
    margin: 0 auto;
}

.image-position-top .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* On primary */
.section--primary .benefits-component {
    color: var(--benefits-color-on-primary)
}

.section--primary .benefits-component .image {
    background-image: var(--benefits-border-on-primary);
}

/* On secondary */
.section--secondary .benefits-component {
    color: var(--benefits-color-on-secondary)
}

.section--secondary .benefits-component .image {
    background-image: var(--benefits-border-on-secondary);
}

@media only screen and (max-width: 1199px) {
    .benefits-component.per-row-5 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 991px) {
    .benefits-component.per-row-4,
    .benefits-component.per-row-5 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (max-width: 767px) {
    .benefits-component.per-row-2,
    .benefits-component.per-row-3,
    .benefits-component.per-row-4,
    .benefits-component.per-row-5 {
        grid-template-columns: 1fr;
    }

}