.flag {
    display: flex;
    flex-direction: column;
    justify-content: start;
	gap: 5px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 20px;
    background: #f56a66f0;
    color: #fff;
    padding: 15px 10px 30px;
	padding-top: 15px;
	font-size: .75rem;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 20px), 0 100%);
	transition: padding-top .3s ease-out, top 1s ease-out;
}
.flag .discount {
	font: 1.3rem "Helvetica_Condensed", "Roboto", Helvetica, Arial, sans-serif;
	scale: 1 1.5;
}
.flag .action {
	text-transform: uppercase;
}
.flag .date {
	font-size: 10px;
	max-width: 10ch;
}	
.pane:hover .flag {
	padding-top: 40px;
	transition: padding-top .75s .5s linear(
		0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
		1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
		0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
		0.973, 1, 0.988, 0.984, 0.988, 1
	), top 1s ease-out;
}

@media (prefers-reduced-motion: no-preference) {
 @supports (animation-timeline: scroll()) {
 
 	.actions .scroll_helper {
		view-timeline: --actions-tl;

		animation: run_flag_animation steps(1) both;
		animation-timeline: --actions-tl;
		animation-range-end: entry 40%; 
	}
	@keyframes run_flag_animation {
		to {
			--animate-flag: true;
		}
	}	

	.flag {
		top: -100%;
		transition-delay: .5s, 1s;
	}
	@container style(--animate-flag: true) {
		.flag {
			top: 0;
			transition-delay: .5s, 0s;
		}
		.slide:nth-child(2) .flag {
			transition-delay: .5s, .15s;
		}
		.slide:nth-child(3) .flag {
			transition-delay: .5s, .3s;
		}
		.slide:nth-child(4) .flag {
			transition-delay: .5s, .45s;
		}
		.slide:nth-child(n+5) .flag {
			transition-delay: .5s, .5s;
		}
	}

	
	.actions .pic > img {
		animation: img-scale-progress .1ms linear both;
		animation-timeline: --actions-tl;
		animation-range: entry;
	}

 }
}