*, *::before, *::after { box-sizing: border-box; } .video-watch-page { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px 48px; } .video-breadcrumb { padding: 14px 0 10px; font-size: 16px; line-height: 1.4; } .video-breadcrumb ol { margin: 0; padding: 0; list-style: none; } .video-breadcrumb li { display: inline; color: #171717; } .video-breadcrumb li:not(:last-child)::after { content: " > "; color: #171717; } .video-breadcrumb a { color: #294e95; text-decoration: underline; text-underline-offset: 2px; } .video-breadcrumb a:hover, .video-breadcrumb a:focus { color: #1f3f7a; } .video-watch-header { margin-bottom: 12px; } .video-watch-header h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-weight: 600; color: #171717; } .video-watch-player { width: 100%; margin-bottom: 28px; } .video-responsive { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .video-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-watch-content { max-width: 960px; } .video-watch-content h2 { margin: 0 0 10px; font-size: clamp(24px, 2.5vw, 30px); line-height: 1.25; font-weight: 600; color: #171717; } .video-watch-content p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #333; } .video-product-link { margin-top: 18px; } .video-product-link a { color: #294e95; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .video-product-link a:hover, .video-product-link a:focus { color: #1f3f7a; } .video-product-link span { color: #294e95; font-weight: 600; } @media screen and (max-width: 1023px) { .video-watch-page { padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 767px) { .video-watch-page { padding: 0 16px 32px; } .video-breadcrumb { padding: 10px 0 8px; font-size: 14px; } .video-watch-header { margin-bottom: 10px; } .video-watch-player { margin-bottom: 22px; } .video-watch-content p { font-size: 15px; } }