@layer blocks {
	.blk--hero {
		position: relative;
		isolation: isolate;
		display: grid;
		grid-template-columns: var(--page);
		grid-template-rows: 1fr;
		min-block-size: max(32rem, min(100svh, 60rem));
	}

	.hero__media {
		grid-column: full;
		grid-row: 1;
		position: relative;
		z-index: -1;
		overflow: hidden;
		background: var(--c-bg);
	}
	/* temna plast 50 % in preliv v ozadje strani na dnu */
	.hero__media::before,
	.hero__media::after {
		content: "";
		position: absolute;
		z-index: 1;
		inset-inline: 0;
		pointer-events: none;
	}
	/* v povprečju 50 % kot v Figmi, za besedilom nekoliko temneje (berljivost pri svetlih slikah) */
	.hero__media::before {
		inset-block: 0;
		background: linear-gradient(to right, rgb(19 19 19 / .65), rgb(19 19 19 / .45) 60%, rgb(19 19 19 / .4));
	}
	.hero__media::after {
		inset-block-end: 0;
		block-size: min(30%, 18.25rem);
		background: linear-gradient(to top, var(--c-bg) 14%, rgb(19 19 19 / 0));
	}

	.hero__slides {
		position: absolute;
		inset: 0;
	}
	.hero__slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 1.4s ease;
	}
	.hero__slide.is-active { opacity: 1; }
	.hero__slide img,
	.hero__slide video {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: 70% 50%;
	}

	.hero__content {
		grid-column: content;
		grid-row: 1;
		align-self: center;
		padding-block: calc(var(--header-h) + var(--s-l)) calc(var(--s-xl) + 3rem);
	}
	.hero__title { max-inline-size: 26em; }

	.hero__scroll {
		position: absolute;
		inset-block-end: clamp(1.5rem, 14svh, 9.5rem);
		inset-inline-start: 50%;
		translate: -50% 0;
		display: block;
		inline-size: 2.8125rem;
		color: var(--c-text);
		opacity: .85;
		transition: opacity var(--dur) var(--ease);
	}
	.hero__scroll:hover { opacity: 1; }
	.hero__scroll svg { inline-size: 100%; block-size: auto; }

	.hero__pause {
		grid-column: content;
		grid-row: 1;
		align-self: end;
		justify-self: end;
		margin-block-end: clamp(1.5rem, 14svh, 9.5rem);
		display: grid;
		place-items: center;
		inline-size: 2.75rem;
		aspect-ratio: 1;
		border: 1px solid var(--c-line);
		color: var(--c-muted);
		transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
	}
	.hero__pause:hover { color: var(--c-text); border-color: var(--c-text); }
	/* ikona: dve črti (ustavi) / trikotnik (predvajaj) */
	.hero__pause::before {
		content: "";
		inline-size: 10px;
		block-size: 12px;
		border-inline: 3px solid currentColor;
	}
	.hero__pause[aria-pressed="true"]::before {
		inline-size: 0;
		block-size: 0;
		border-block: 7px solid transparent;
		border-inline: 11px solid currentColor;
		border-inline-end: 0;
		margin-inline-start: 3px;
	}

	.hero__end {
		position: absolute;
		inset-block-end: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		.hero__slide.is-active img { animation: hero-zoom 9s ease-out both; }
		.hero__scroll .scroll__wheel { animation: hero-wheel 2s ease-in-out infinite; }
	}

	@keyframes hero-zoom {
		from { scale: 1.06; }
	}
	@keyframes hero-wheel {
		0%, 100% { translate: 0 0; opacity: 1; }
		60% { translate: 0 3px; opacity: .3; }
	}

	@media (width < 48em) {
		.hero__content { align-self: end; }
		.hero__scroll { display: none; }
		.hero__pause { margin-block-end: var(--s-xl); }
	}
}