/* Staff Grid - Single row on desktop, 3 columns on mobile */
.staff-grid {
    width: 100% !important;
}

.staff-row-all {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    overflow-x: auto !important; /* Allow horizontal scrolling if needed */
    gap: 10px !important;
}

.staff-item {
    flex: 1 !important;
    min-width: 120px !important;
    max-width: calc(100% / 7 - 10px) !important;
    margin: 0 !important;
}

.staff-image {
    width: 100% !important;
}

.staff-image img {
    width: 100% !important;
    height: auto !important;
}

/* Tablet styles */
@media (max-width: 991px) {
    .staff-row-all {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }
    
    .staff-grid {
        padding: 0 !important;
    }
    
    .staff-item {
        flex: 0 0 31% !important;
        max-width: 31% !important;
        margin: 0 0 15px 0 !important;
    }
    
    .staff-name {
        font-size: 16px !important;
        margin: 5px 0 2px 0 !important;
    }
    
    .staff-job {
        font-size: 12px !important;
        margin: 0 !important;
    }
    
    /* Reduce heading sizes */
    .staff-grid-subtitle {
        font-size: 18px !important;
    }
    
    .typing-title, 
    .staff-title h2 {
        font-size: 24px !important;
    }
    
    .staff-typing-text {
        font-size: 16px !important;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    .staff-row-all {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    
    .staff-item {
        flex: 0 0 31% !important;
        max-width: 31% !important;
        margin: 0 0 10px 0 !important;
    }
    
    .staff-info {
        padding: 0 2px !important;
    }
    
    .staff-name {
        font-size: 14px !important;
        margin: 5px 0 2px 0 !important;
    }
    
    .staff-job {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    /* Further reduce heading sizes */
    .staff-grid-subtitle {
        font-size: 16px !important;
    }
    
    .typing-title, 
    .staff-title h2 {
        font-size: 20px !important;
    }
}