.pane > div {
	height: 100%;
    display: flex;
    flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
.pic-holder {
    padding: 10px 20px 20px;
    overflow: hidden;
}
.pic {
	height: 100%;
}	
.pic > img {
    width: auto;
    height: 100%;
    max-width: 250px;
	max-width: min(100%, 250px);
	transition: all 0.3s 0.3s ease-out;
}
.part {
    text-transform: uppercase;
	text-align: center;
    font-size: .75rem;
    margin-bottom: 8px;	
	color: #777;
}
h4 {
	font: 500 1.375rem "Roboto", helvetica, arial, sans-serif;
	text-align: center;
	margin: 0 0 10px;
}
.info {
	margin: 4px 0;
	text-align: center;
	font-family: "Roboto", helvetica, arial, sans-serif;
	color: #555;
}	
.info strong {
	font-weight: 500;
}
.rank {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    font: 500 1.375rem/40px "Roboto", helvetica, arial, sans-serif;
    text-align: center;
    background: rgba(255,255,255,.5); /* url(/pic/badge.svg) no-repeat 0 / 100%; */
	border: 1px solid #afb6d5;
    border-radius: 50%;
/*    opacity: 0.8;*/
    color: #8094f4;			/*#2039ad;*/
	transition: transform 0.5s ease-in;
}
.pane:hover .rank {
	transform: scale(1.25);
}

@media (max-height: 600px) {
	h4 {
		margin: 0 0 8px;
		font-size: 1.2rem;
	}
	.info {
		margin: 2px 0;
		font-size: .9rem;
	}	
}
@media (max-height: 480px) {
	.pic-holder {
		display: none;
	}
}	

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {

	.topcourses .scroll_helper {
		view-timeline: --topcourses-tl block 100% 10%;
	}

    .topcourses .pic > img {
		animation: img-scale-progress 1ms linear both;
		animation-timeline: --topcourses-tl;
	}
	@keyframes img-scale-progress {
		from {
		  scale: .3;
		}
	}

	.rank {
		animation: img-rank-progress 1ms linear both;
		animation-timeline: --topcourses-tl;
	}
	@keyframes img-rank-progress {
		from {
		  scale: 0;
		  opacity: 0;
		}
	}	
	
}}

.hotprice {
	display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
}
.hotprice s {
	font-size: .9em;
	font-weight: 400;
}
.hotprice b {
    color: #f11d19;
    margin-bottom: -5px;
	font-size: 1.2rem;
}