.flex{
	display: flex;
	flex-wrap: wrap;
}
.card {
	width: 250px;
	max-width:30vw;
}

.card.instructor a .imgbox {
	padding-top: 100%;
}

.card a .imgbox {
	padding-top: 56.25%;
}


@media (min-width: 768px) {
	.instructor_flex{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.ph{
		display: block;
		width: calc(100% - 520px);
		min-width: 49%;
		margin: 10px;
		position: relative;
		overflow: hidden;
	}
	
	.ph img{
		display: block;
		width: 100%;
		height:calc(100% - 10px);
		margin: 0 0 0px;
		object-fit: cover;
	}
	
	#main .instructor_flex .category{
		display: block;
		width: 500px;
		max-width: 49%;
	}

	
	
	
	.flex{
		display: flex;
		flex-direction: row;
	}
}