/*
==========================================================================
    Component: Key Benefits
==========================================================================
*/

/* --- Main Component Styles --- */
.key-benefits-grid {
    display: grid;
    /* Default to 3 columns for desktop-first approach */
    grid-template-columns: repeat(3, 1fr);
    gap: 1em 1em;
    margin: 0 auto;
}

/* --- Sub-component Styles --- */
.key-benefit-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.key-benefit-icon img {
    max-width: 64px;
    height: auto;
    object-fit: contain;
    margin-bottom: 12px;
}

.key-benefit-item p {
    margin-top: -0.6em;
    padding-right: 1em;
}

/* --- Responsive Styles --- */
@media (max-width: 767px) {
    /* Mobile styles */
    .key-benefits-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .key-benefit-item p {
        margin-top: -0.4em;
    }
    
    .key-benefit-icon {
        display: none;
    }
    
    .key-benefit-description {
        width: 92%;
    }
    
    .key-benefit-description p {
        padding-bottom: 0.6em;
    }
    
    .key-benefit-description p:last-child {
        padding-bottom: 0em;
    }
}

@media (min-width: 768px) and (max-width: 1141px) {
    /* Tablet styles */
    .key-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .key-benefit-icon {
        display: none;
    }
}

@media (min-width: 1142px) and (max-width: 1600px) {
    /* Desktop styles (inherits the 3-column base style) */
}

@media (min-width: 1601px) {
    /* Large desktop styles (inherits the 3-column base style) */
}