.blog .scroller .pane {
	padding: 0;
}

.blog .pic-holder {
	height: 40%;
	width: 100%;
    padding: 0;
}
.blog .pic > img {
	height: 100%;
	width: auto;
	min-width: 100%;
	filter: sepia(1) hue-rotate(180deg) saturate(200%);
	mix-blend-mode: screen;
	transition: all .3s linear;
}
.blog .pic {
/*	background: #22f;			- will set online when pic loaded */
	opacity: .75;
	transition: all .3s linear;
}	
.blog .pane:hover .pic {
	background: transparent !important;
	opacity: 1;
}	
.blog .pane:hover .pic > img {
	filter: none;
	mix-blend-mode: unset;
}	

.blog .text-holder {
    display: flex;
    flex-direction: column;
    padding: 20px 10px 10px;
    height: 60%;
	text-align: left;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}
@media (max-height: 480px) {
    .blog .text-holder {
        height: 100%;
    }
}

.blog .pane h4 {
	text-align: left;
	margin: 0 0 6px;
}
.blog .pane h4,
.blog .pane .desc p {	
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
	overflow: hidden;
}

.blog .pane .desc {
    flex: 2 1 90%;
	color: #555;
	margin: 4px 0;
	overflow: hidden;
	position: relative;
}	
.blog .pane .desc p {
	margin: 0;
    line-height: 1.5rem;
    -webkit-line-clamp: 6;
}
.blog .pane .date {
    flex: 1 1 1.5rem;
    color: #777;
	margin: 4px 0;
    font-size: .8rem;
}

@supports (animation-timeline: scroll()) {
 @property --y {
	syntax: "<number>";
	inherits: true;
	initial-value: 0; 
 }
 @property --h {
	syntax: "<integer>";
	inherits: true;
	initial-value: 5; 
 }
 @property --lh {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px; 
 }
 .blog .scroller .pane {  
	--lh: 1.5rem;
	--h: round(down, 1/(1 - var(--y)) / (10000 * tan(atan2(var(--lh), 10000px))), 1);	
/*
	calc(1 / (1 - var(--y))) - высота контейнера без px 
	calc(10000 * tan(atan2(var(--lh), 10000px))) - число пикселей в 1.5rem
  // calc() wrapper required for Safari, bug:
  // https://bugs.webkit.org/show_bug.cgi?id=263000
  // 10000px instead of 1px required for FireFox, bug:
  // https://bugzilla.mozilla.org/show_bug.cgi?id=1939353
	Итог:
	calc(1/(1 - var(--y)) / (10000 * tan(atan2(var(--lh), 10000px)))) - число строк в контейнере
*/	
	
	timeline-scope: --cy;
	animation: calc_y linear;
	animation-timeline: --cy;
	animation-range: entry 100% exit 100%;
 }
 @keyframes calc_y {to{--y:1}}

 .blog .pane .desc p {
    -webkit-line-clamp: var(--h);
 }
 .blog .pane .desc::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	aspect-ratio: 1;
	view-timeline: --cy block;
 } 
/* только для контроля числа строк
 .blog .pane .desc::after {
  content: counter(h);
  counter-reset: h var(--h);
  font-size: 40px;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  background:#eef;
 }
*/ 

 @media (prefers-reduced-motion: no-preference) {
	.blog {
		timeline-scope: --blog-tl;
	}
	.blog .scroll_helper {
		view-timeline: --blog-tl block 100% 40%;
	}

    .blog .pic {
		animation: img-bg-progress 1ms linear both;
		animation-timeline: --blog-tl;
	}
    .blog .pic > img {
		animation: img-filter-progress 1ms linear both;
		animation-timeline: --blog-tl;
	}

	@keyframes img-bg-progress {
		to {
		  background: transparent;  opacity: 1;
		}
	}
	@keyframes img-filter-progress {
		to {
		  filter: none;
		}
	}
 }
}