.classes-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-gap:2em;
	margin-top:2em;
}
@media screen and (max-width:1170px) {
    .classes-grid {
        grid-template-columns:repeat(3, 1fr);
    }    
}
@media screen and (max-width:768px) {
    .classes-grid {
        grid-template-columns:2fr;
    }    
}
@media screen and (max-width:600px) {
    .classes-grid {
        grid-template-columns:1fr;
    }    
}


.class { 
    border: 1px solid #e3e3e3;
    box-shadow: 2px 6px 12px rgba(0,0,0,0);
    transition:all 0.3s linear;
}
.class:hover {
    box-shadow: 2px 6px 12px rgba(0,0,0,0.2);
}
.class .description {
   padding: 0 25px 25px;
}
.class .bg { 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}
.class .bg .overlay {
    height: 230px;
    display: grid;
    align-items: center;
    padding: 15px;
    background: rgba(0,0,0,0.6);
    text-align: center;
}

.class a,
.class a:visited {
    color:#e11731;
    text-decoration:underline;
}
.class a:hover { color:black; }


.class .img-wrapper {
    height: 200px;
    overflow: hidden;
}

.class .img-wrapper picture,
.class .img-wrapper img {
    
	object-fit:cover;
	object-position:center;
	height: 200px;
    width:100% !important;
	max-width:100% !important;
	
}

.class h3 {
    font-family: 'myriad-pro-condensed', sans-serif;
    font-size: 23px;
    font-weight: bold;
	margin-top:0.5em;
}