#direct-vendors {
    overflow: hidden; 
}

#direct-vendors .colgroup .col {
    width: 100%; font-size: 1rem; 
}


ul.vendors {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 4px 10px; 
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

ul.vendors li {
    padding: 5px 0;
    list-style-type: none; 
}

#comprehensive-manufacturing-lockup {
    padding-top: 50px; 
    font-size: 1.1rem !important; 
    text-align: left !important; 
    width: 100%; max-width: 500px; 
}

#comprehensive-manufacturing-lockup h2 {
    display: block; clear: both; 
    font-size: 2rem; 
}


#direct-vendors-banner {
    display: block; width: 100%; height: 550px; 
    position: relative; 
}

#direct-vendors-banner img {
    display: block; width: 100%; height: 100%; 
    object-fit: cover; 
}

#direct-vendors-banner .inner {
    z-index: 10;
    padding-top: 50px; 
    position: absolute; 
    top: 0px; 
    left: 50%; 
    transform: translateX(-50%); 
}

#direct-vendors-banner h2 {
    color: var(--background-color); 
}

#direct-vendors {
    padding-top: 50px; 
}





@media all and (max-width: 840px){	
    ul.vendors{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media all and (max-width: 640px){	
    ul.vendors{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 480px){	
    ul.vendors{
        grid-template-columns: repeat(1, 1fr);
    }
    ul.vendors li {
        text-align: center; 
    }
}