.video-index-page, .video-index-page *, .video-index-page *::before, .video-index-page *::after { box-sizing: border-box; } .video-index-page { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px 48px; } .video-index-page .video-breadcrumb { padding: 14px 0 10px; font-size: 16px; line-height: 1.4; } .video-index-page .video-breadcrumb ol { margin: 0; padding: 0; list-style: none; } .video-index-page .video-breadcrumb li { display: inline; color: #171717; } .video-index-page .video-breadcrumb li:not(:last-child)::after { content: " > "; color: #171717; } .video-index-page .video-breadcrumb a { color: #294e95; text-decoration: underline; text-underline-offset: 2px; } .video-index-page .video-breadcrumb a:hover, .video-index-page .video-breadcrumb a:focus { color: #1f3f7a; } .video-index-page .video-index-header { margin-bottom: 28px; } .video-index-page .video-index-header h2 { margin: 0 0 10px; font-size: clamp(30px, 3vw, 40px); line-height: 1.2; font-weight: 600; color: #171717; } .video-index-page .video-index-header p { margin: 0; max-width: 900px; font-size: 16px; line-height: 1.6; color: #333; } .video-index-page .video-index-list { padding-top: 24px; border-top: 1px solid #ddd; } .video-index-page .video-index-list ul { columns: 3; column-gap: 60px; margin: 0; padding: 0; list-style: none; } .video-index-page .video-index-list li { break-inside: avoid; margin: 0 0 10px; font-size: 17px; line-height: 1.4; } .video-index-page .video-index-list a { color: #294e95; text-decoration: none; } .video-index-page .video-index-list a:hover, .video-index-page .video-index-list a:focus { color: #294e95; text-decoration: none; } @media screen and (max-width: 1023px) { .video-index-page { padding-left: 20px; padding-right: 20px; } .video-index-page .video-index-list ul { columns: 2; column-gap: 40px; } } @media screen and (max-width: 767px) { .video-index-page { padding: 0 16px 32px; } .video-index-page .video-breadcrumb { padding: 10px 0 8px; font-size: 14px; } .video-index-page .video-index-header { margin-bottom: 20px; } .video-index-page .video-index-list { padding-top: 18px; } .video-index-page .video-index-list ul { columns: 1; } .video-index-page .video-index-list li { margin-bottom: 12px; font-size: 16px; } }
