.crophl {
    width       :770px;
    height      :400px; 
    object-fit  :cover;}

.crop1 {
    width: 220px; /* width of container */
    height: 130px; /* height of container */
    object-fit: cover;
    margin-right: 20px;
}

/* height of container */

@media screen and (max-width: 1080px){
	.crop1 {
    	width: 140px;
    	height: 83px;
    	margin-right: 10px;
	}
}

@media screen and (max-width: 700px){
	.crophl {width     :700px;}
	.crop1 {
   		width          :120px;
    	height         :83px;
    	margin-right   :10px;}
}

@media screen and (max-width: 650px){
    .crophl {width: 650px;}
}

@media screen and (max-width: 600px){
    .crophl {width: 600px;}
}

@media screen and (max-width: 550px){
    .crophl {width: 550px;}
}

@media screen and (max-width: 500px){
    .crophl {width: 500px;}
}

@media screen and (max-width: 450px){
    .crophl {width: 450px;}
}

@media screen and (max-width: 400px){
    .crophl { width: 400px; }
}

@media screen and (max-width: 350px){
    .crophl { width: 350px; }
}

@media screen and (max-width: 300px){
    .crophl { width: 300px; }
}