.ydb-hero { position: relative; width: 100%; aspect-ratio: var(--ydb-ar, 2/1); overflow: hidden; background: #f3f1ee; }
.ydb-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--ydb-fade, 1200ms) ease, visibility 0s linear var(--ydb-fade, 1200ms); }
.ydb-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--ydb-fade, 1200ms) ease, visibility 0s; z-index: 1; }
.ydb-hero__slide a, .ydb-hero__slide picture { display: block; width: 100%; height: 100%; }
.ydb-hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ydb-hero__dots { position: absolute; z-index: 2; inset-inline: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.ydb-hero__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; transition: background .2s, transform .2s; }
.ydb-hero__dot.is-active { background: #fff; transform: scale(1.25); }

.ydb-banner picture, .ydb-banner img { display: block; width: 100%; height: auto; }

@media (max-width: 767px) {
	.ydb-hero { aspect-ratio: var(--ydb-ar-m, var(--ydb-ar, 2/1)); }
	.ydb-hero__dots { bottom: 8px; }
	/* Slides without a square image are skipped on mobile. */
	.ydb-hero.has-m .ydb-no-m { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ydb-hero__slide, .ydb-hero__slide.is-active { transition: none; }
}