/*
==========================================================================
    Component: Key Challenges Grid
==========================================================================
*/

/* --- Main Component Styles --- */
.key-challenges-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-challenge-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

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

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

/* --- Responsive Styles --- */
@media (max-width: 767px) {
    /* Mobile styles */
    .key-challenges-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1141px) {
    /* Tablet styles */
    .key-challenges-grid {
        grid-template-columns: repeat(2, 1fr); /* Suggestion: 2 columns often works better on tablets than 1 */
    }
}

@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) */
}