.light-tint-example { margin: 0; min-width: 0; }
.light-tint-example__images { position: relative; overflow: hidden; border-radius: var(--radius-md, 8px); }
.light-tint-example__frame { position: relative; }
.light-tint-example__frame img { display: block; width: 100%; height: auto; aspect-ratio: 700 / 346; object-fit: cover; }
.light-tint-example__frame--after { position: absolute; inset: 0; opacity: 0; animation: light-tint-fade 8s ease-in-out infinite; }
.light-tint-example__label { position: absolute; bottom: 12px; left: 12px; padding: 4px 12px; border-radius: 4px; background: #111; color: #fff; font-size: 0.875rem; font-weight: 600; }
.light-tint-example figcaption { margin-top: 12px; font-weight: 600; text-align: center; }
.light-tint-pause { accent-color: var(--color-primary); margin-top: 16px; }
.light-tint-pause-label { cursor: pointer; margin-left: 6px; }
.light-tint-pause:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.light-tint-pause:checked ~ .grid .light-tint-example__frame--after { animation-play-state: paused; }
@keyframes light-tint-fade { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .light-tint-pause, .light-tint-pause-label { display: none; }
    .light-tint-example__images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .light-tint-example__frame--after { position: relative; opacity: 1; animation: none; }
}