#oilcolor{
    margin: 70px 0;
}


@media screen and (max-width: 620px){
   .oilcolor-item {
    position: relative;
    display: block;
    justify-content: center;
    align-content: center;
    
    }
    
    .oilcolor-item div{
        padding: 30px 0;
        align-items: center;
    }
    
    #oilcolor img{
        width: 100%;
    }
}

@media screen and (min-width: 621px){
    
    #oilcolor{
        padding: 0 15px;
    }
    
    #oilcolor .oilcolor-item{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/*        grid-auto-rows: 200px;*/
        grid-auto-flow: dense;
        grid-row-gap: 30px;
        grid-column-gap: 5px;
        align-content: center;
/*        align-items: center;*/
/*        flex-direction: column;*/
    }
    
    .oilcolor-item div{
        padding: 10px 5px;
        
    }
    
    .oilcolor-item img {
        vertical-align: middle;
        display: inline-block;
        object-fit: cover;
        width: 100%;
        height: auto;
    }
}


@media screen and (min-width: 771px){
    
    #oilcolor{
        padding: 0 50px;
    }
    
    #oilcolor .oilcolor-item{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/*        grid-auto-rows: 200px;*/
        grid-auto-flow: dense;
        grid-row-gap: 30px;
        grid-column-gap: 10px;
        align-content: center;
        align-items: center;
/*        flex-direction: column;*/
    }
    
    .oilcolor-item div{
        padding: 20px 5px;
        
    }
    
    .oilcolor-item img {
        vertical-align: middle;
        display: inline-block;
        object-fit: cover;
        width: 100%;
        height: auto;
    }
    
}