.course-list{
	display:grid;
	grid-gap:45px;
	grid-template-columns: repeat( 3 , 1fr );
}

.course-list .course-pic{
	border-radius: 10px;
    padding-top: 55%;
    position: relative;
    overflow: hidden;
}
.contentpage[data-coursecate="WORKSHOP"] .course-list .course-pic{
  padding-top:155%;
}
.course-list .course-pic a{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
.course-name{
	margin-top:20px;
	text-align:center;
	
	font:var(--title-font);
	font-size:20px;
	line-height:28px;
	color:var(--theme_colorB_v1);
}
.course-name a{
	display:block;
}
.course-pic img{
	    transition: transform .5s;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.course-list .course-item:hover img{
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */

}
.course-list .course-item .course-pic{
	 box-shadow: var(--img_shadow_v1);
}
.course-list .course-item:hover .course-pic{
	 
}


	.coursepage-details .course-heading{
		padding: 16px 25px;
		position: relative;
		display: grid;
		grid-template-columns: 75px calc( 100% - 75px - 25px );
		grid-gap: 25px;
		
	}
	
	.coursepage-details .news-heading{
		
		margin-bottom:50px;
		padding:0px;
		
	}
	.coursepage-details .news-heading
	,.coursepage-details .news-content{
		position: relative;
	}
	
	
	.coursepage-details .course-nav{
		font:var(--title2-font);
		font-size:18px;
		line-height:24px;
		letter-spacing:-0.18px;
		color:var(--theme_colorA_v5);
		width: fit-content;
		position: absolute;
		right: 0px;
		margin-top: 5px;
	}
	.coursepage-details .course-nav a{
		background-image:url('/images/icon_list_circle_v2.svg');
		background-repeat:no-repeat;
		background-position: left;
		background-repeat: no-repeat;
		background-size: contain;
		padding-left: 35px;
	}
		
	
	.coursepage-details .course-title{
		
		font:var(--title-font);
		color:var(--theme_colorA_v1);
		font-size:30px;
		line-height:37px;
		margin-bottom:37px;
	}
/* TABLET VERSION */
@media only screen and (max-width:1200px) {
	.course-list{
		grid-gap:30px;
	}
	.course-name{
		margin-top:14px;
	}
}
/* MOBILE VERSION */
@media only screen and (max-width:560px) {
	.course-list{
	display:grid;
	grid-gap:45px;
	grid-template-columns: 100%;
}