.yumin-other-devices { padding-block: clamp(52px, 5vw, 94px) 0; background: linear-gradient(180deg, #ebebe9 0%, #f5f5f4 100%); }
.yumin-other-devices .yumin-products-heading { margin-bottom: clamp(38px, 4vw, 76px); }
.yumin-other-devices .yumin-products-heading h2 { color: var(--products-teal, #00b1a7); font-size: clamp(28px, 2.1vw, 42px); }
.yumin-other-devices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.yumin-other-device { position: relative; min-width: 0; min-height: clamp(530px, 46.8vw, 898px); overflow: hidden; background: #fff; text-align: center; }
.yumin-other-device__media { position: relative; min-height: inherit; overflow: hidden; isolation: isolate; }
.yumin-other-device__media a { position: absolute; z-index: 1; inset: 0; display: block; }
.yumin-other-device__media.has-yumin-water-ripple a { z-index: 2; }
.yumin-other-device img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(1); transition: filter 560ms cubic-bezier(.22, 1, .36, 1); }
.yumin-other-device:nth-child(2) img { filter: brightness(1.68); }
.yumin-other-device__media::after { position: absolute; z-index: 2; inset: 0; background: rgb(37 42 42 / 43%); content: ''; opacity: 0; pointer-events: none; transition: opacity 560ms cubic-bezier(.22, 1, .36, 1); }
.yumin-other-device__media.has-yumin-water-ripple::after { z-index: 3; }
.yumin-other-device h3 { position: absolute; z-index: 4; right: 16px; bottom: clamp(30px, 4.2vw, 80px); left: 16px; margin: 0; color: #1d252b; font: 800 clamp(22px, 2.2vw, 42px)/1.1 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; pointer-events: none; transition: color 560ms cubic-bezier(.22, 1, .36, 1); }
.yumin-other-device.is-primary h3 { color: var(--products-teal, #00b1a7); }
.yumin-other-device:not(.is-primary) .yumin-other-device__media::after { opacity: 1; }
.yumin-other-device:not(.is-primary) h3 { color: #fff; }

/* Reason: 遮罩、文案和扫光均在同一张卡片面板内变化，避免标题脱离设计卡片或状态切换发生几何跳动。 */
@media (hover: hover) {
	.yumin-other-devices:has(.yumin-other-device:is(:hover, :focus-within)) .yumin-other-device h3 { color: #fff; }
	.yumin-other-devices:has(.yumin-other-device:is(:hover, :focus-within)) .yumin-other-device .yumin-other-device__media::after { opacity: 1; }
	.yumin-other-devices:has(.yumin-other-device:is(:hover, :focus-within)) .yumin-other-device:is(:hover, :focus-within) h3 { color: var(--products-teal, #00b1a7); }
	.yumin-other-devices:has(.yumin-other-device:is(:hover, :focus-within)) .yumin-other-device:is(:hover, :focus-within) .yumin-other-device__media::after { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) { .yumin-other-device img, .yumin-other-device h3, .yumin-other-device__media::after { transition: none; } }
@media (max-width: 767px) { .yumin-other-devices__grid { grid-template-columns: 1fr; gap: 2px; } .yumin-other-device, .yumin-other-device__media { min-height: 0; aspect-ratio: 629 / 895; } }