:root { --black: #1d1d1f; --bg-primary: #f5f5f7; --gray-primary: #f2f2f2; --gray-text: #515154; --primary: #8129d9; --blue: #0071e3; --footer-background: #f5f5f7; --footer-border-color: #d2d2d7; --footer-text-color: #6e6e73; --footer-link-color: #424245; --footer-pipe-color: #86868b; --footer-directory-title-color: #1d1d1f; --footer-directory-title-color-hover: #000; --borer-radius: 10px; } *, ::before, ::after { box-sizing: inherit; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; } body, input, textarea, select, button { font-synthesis: none; -moz-font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale } body.theme-dark .astro-code, body.theme-dark .astro-code span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; /* Optional, if you also want font styles */ font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; } .astro-code{ padding: 12px; border-radius: var(--borer-radius); background-color: var(--gray-primary) !important; } ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, hgroup, p, blockquote, figure, form, fieldset, input, legend, pre, abbr, button { margin: 0; padding: 0; } pre, code, address, caption, th, figcaption { font-size: 0.875em; font-family: SF Mono, monaco, -apple-system, roboto mono, monospace; font-weight: normal; font-style: normal; } fieldset, iframe { border: 0; } caption, th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; } main, summary, details { display: block; } audio, canvas, video, progress { vertical-align: baseline; } button { background: none; border: 0; box-sizing: border-box; color: inherit; cursor: pointer; font: inherit; line-height: inherit; overflow: visible; vertical-align: inherit; } button:disabled { cursor: default; } :focus[data-focus-method="mouse"]:not(input):not(textarea):not(select), :focus[data-focus-method="touch"]:not(input):not(textarea):not(select) { outline: none; } ::-moz-focus-inner { border: 0; padding: 0; } html { font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; /* font-size: 106.25%; */ quotes: "“" "”"; } body { /* font-size: 17px; */ line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; background-color: #fff; color: #1d1d1f; font-style: normal; } .content-body { margin: 0 auto; max-width: 980px; padding: 0 22px; } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: #1d1d1f; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { display: block; margin: 0; } h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { margin-top: 0.8em; } h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6 { margin-top: 0.4em; } p + h1, ul + h1, ol + h1, p + h2, ul + h2, ol + h2, p + h3, ul + h3, ol + h3, p + h4, ul + h4, ol + h4, p + h5, ul + h5, ol + h5, p + h6, ul + h6, ol + h6 { margin-top: 1.6em; } .heading-collapsed + * { margin-top: 0; } p + *, ul + *, ol + * { margin-top: 0.8em; } /* ul, ol { margin-left: 1.17647em; } */ ul ul, ul ol, ol ul, ol ol { margin-top: 0; margin-bottom: 0; } nav ul, nav ol { margin: 0; list-style: none; } li li { font-size: 1em; } a, .link { color: #06c; letter-spacing: inherit; } a:link, a:visited, .link:link, .link:visited { text-decoration: none; } a:hover, .link:hover { text-decoration: underline; } a:active, .link:active { text-decoration: none; } a:disabled, .link:disabled { opacity: 0.32; } .css-sticky { position: -webkit-sticky; position: sticky; } .nav { position: relative; top: 0; left: 0; width: 100%; height: 52px; min-width: 1024px; z-index: 9997; height: 3.05882rem; border-bottom: 1px solid var(--footer-background); } .nav-title { color: #1d1d1f; font-size: 21px; line-height: 1.14286; font-weight: 600; letter-spacing: 0.011em; cursor: default; float: left; padding: 0; height: 52px; white-space: nowrap; } .nav-item-content { font-size: 14px; font-weight: 500; text-decoration: none !important; color: #676b5f; } @media only screen and (max-width: 734px) { .nav { height: 2.82353rem; } .nav-title { font-size: 21px; line-height: 21px; } .nav-item-content { font-size: 14px; } } @media only screen and (max-width: 1044px) { .nav { min-width: 320px; } } @media only screen and (max-width: 767px) { .nav { height: 48px; } } .nav-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: auto; min-height: 100%; z-index: 1; } .nav-content-wrapper { margin: 0 auto; max-width: 980px; padding: 0 22px; position: relative; z-index: 2; } a.nav-title:hover { cursor: pointer; text-decoration: none; } .nav-item-wrapper { margin: 0px 5px; padding: 6px 10px; border-radius: 10px; } .nav-item-wrapper a:hover { color: #2997ff; } .main { padding: 0; overflow-x: hidden; } .nr-scroll-animation { --nr-animation-transform-x: 0; --nr-animation-transform-y: 0; --nr-animation-transform-scale: 1; --nr-animation-duration: 800ms; } .nr-scroll-animation--off { opacity: 0 !important; } .nr-scroll-animation--on { animation-name: nr-scroll-animation; animation-duration: var(--nr-animation-duration); animation-timing-function: cubic-bezier(0.4, 0, 0.25, 1); } .tile { background-color: #fff; display: flex; border-radius: 16px; overflow: hidden; z-index: 0; position: relative; } .tile .tile__description { display: flex; flex-direction: column; flex-shrink: 0; flex-grow: 1; } .tile .tile__media { direction: ltr; } @media only screen and (max-width: 734px) { .tile { border-radius: 12px; } } .tile__category, .tile__timestamp { color: #6e6e73; } .tile__headline { color: #1d1d1f; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } @media (hover: hover) { .tile:hover { text-decoration: none; } } .tile[data-focus-method="key"] { text-decoration: none; } .tile .media--video, .tile .image { transition: transform 400ms cubic-bezier(0.4, 0, 0.25, 1) 0ms; } @media (hover: hover) { html.no-touch.no-reduced-motion .tile:hover .image, html.no-touch.no-reduced-motion .tile:hover .media--video { transform: scale(1.03); } } html.no-touch.no-reduced-motion .tile[data-focus-method="key"] .image, html.no-touch.no-reduced-motion .tile[data-focus-method="key"] .media--video { transform: scale(1.03); } .tile__category { font-size: 12px; line-height: 1.33337; font-weight: 700; letter-spacing: -0.01em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(ar) { line-height: 1.66667; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(ja) { line-height: 1.41667; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(ko) { line-height: 1.41667; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(zh) { letter-spacing: 0em; } .tile__category:lang(th) { line-height: 1.33337; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(zh-CN) { font-family: system-ui, "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__category:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp { font-size: 14px; line-height: 1.28577; font-weight: 600; letter-spacing: -0.016em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; display: flex; justify-content: flex-start; align-items: center; } .tile__timestamp:lang(ar) { letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp:lang(ja) { line-height: 1.35718; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp:lang(ko) { line-height: 1.42859; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp:lang(zh) { letter-spacing: 0em; } .tile__timestamp:lang(th) { line-height: 1.35718; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp:lang(zh-CN) { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI' , "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__timestamp:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile__media { position: relative; z-index: 0; flex-grow: 0; flex-shrink: 0; overflow: hidden; } .image-load { opacity: 0; transform: translateY(20vh); } .image-loaded { opacity: 1; transform: none; transition: transform 800ms cubic-bezier(0.4, 0, 0.25, 1) 0ms, opacity 1s cubic-bezier(0.4, 0, 0.25, 1) 0ms; } html.js .tile[data-progressive-load] .image { background-image: none; } @keyframes nr-scroll-animation { from { opacity: 0; transform: translate( var(--nr-animation-transform-x), var(--nr-animation-transform-y) ) scale(var(--nr-animation-transform-scale)); } to { opacity: 1; transform: translate(0, 0) scale(1); } } html.js .tile.large-load .image { opacity: 0; transform: translateY(20px); } html.js .tile.large-loaded .image { opacity: 1; transform: none; transition: transform 400ms cubic-bezier(0.4, 0, 0.25, 1) 0ms, opacity 1s cubic-bezier(0.4, 0, 0.25, 1) 0ms; } @media only screen and (max-width: 1068px) { html.js .tile.medium-load .image { opacity: 0; transition: none; transform: translateY(20px); } html.js .tile.medium-loaded .image { opacity: 1; transform: none; transition: transform 400ms cubic-bezier(0.4, 0, 0.25, 1) 0ms, opacity 1s cubic-bezier(0.4, 0, 0.25, 1) 0ms; } } @media only screen and (max-width: 734px) { html.js .tile.small-load .image { opacity: 0; transform: translateY(20px); transition: none; } html.js .tile.small-loaded .image { opacity: 1; transform: none; transition: transform 400ms cubic-bezier(0.4, 0, 0.25, 1) 0ms, opacity 1s cubic-bezier(0.4, 0, 0.25, 1) 0ms; } } .image { z-index: 0; } @media only screen and (inverted-colors) { .image { filter: invert(1); } } .media--video { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; } .video-ready .image { display: none; } .every-day-feed { padding-bottom: 80px; overflow: hidden; background-color: #f5f5f7; margin-top: 0; } @media only screen and (max-width: 1068px) { .every-day-feed { padding-bottom: 64px; } } @media only screen and (max-width: 734px) { .every-day-feed { padding-bottom: 40px; } } .every-day-feed .desktop-notification { padding-top: 16px; padding-bottom: 24px; } @media only screen and (max-width: 734px) { .every-day-feed .desktop-notification { padding-top: 12px; padding-bottom: 12px; } } .section-content { margin-left: auto; margin-right: auto; width: 980px; } @media only screen and (min-width: 1441px) { .section-content { margin-left: auto; margin-right: auto; width: 980px; } } @media only screen and (max-width: 1068px) { .section-content { margin-left: auto; margin-right: auto; width: 692px; } } @media only screen and (max-width: 734px) { .section-content { margin-left: auto; margin-right: auto; width: 87.5%; } } @media only screen and (max-width: 734px) { .section-content { max-width: 366px; } } .section-head { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: 0.004em; margin-top: 24px; margin-bottom: 24px; } @media only screen and (max-width: 1068px) { .section-head { font-size: 28px; line-height: 1.14286; font-weight: 700; letter-spacing: 0.007em; margin-bottom: 16px; } } .more-from-newsroom { padding-top: 10px; padding-bottom: 80px; background-color: #fff; overflow: hidden; } @media only screen and (max-width: 1068px) { .more-from-newsroom { padding-top: 14px; padding-bottom: 64px; } } @media only screen and (max-width: 734px) { .more-from-newsroom { padding-top: 10px; padding-bottom: 52px; } } .more-from-newsroom .section-head { margin-bottom: 40px; } @media only screen and (max-width: 1068px) { .more-from-newsroom .section-head { margin-bottom: 28px; } } @media only screen and (max-width: 734px) { .more-from-newsroom .section-head { margin-bottom: 24px; } } .more-from-newsroom .section-tiles { margin-right: -64px; margin-top: 0; justify-content: flex-start; } .more-from-newsroom .section-tiles::before { margin-bottom: 32px; } .more-from-newsroom .section-tiles::after { margin-top: 32px; } @media only screen and (max-width: 1068px) { .more-from-newsroom .section-tiles { margin-right: 0; } .more-from-newsroom .section-tiles::before, .more-from-newsroom .section-tiles::after { width: 100%; } .more-from-newsroom .section-tiles::before { margin-bottom: 24px; } .more-from-newsroom .section-tiles::after { margin-top: 24px; } } .more-from-newsroom .tile-item { display: flex; flex-direction: column; width: 457px; margin-bottom: 32px; margin-right: 64px; flex-grow: 1; } @media only screen and (max-width: 1068px) { .more-from-newsroom .tile-item { margin-right: 0; width: 100%; margin-bottom: 24px; } } .more-from-newsroom .tile-item::after { content: ""; flex: 0 0 auto; height: 1px; display: block; background-color: #d0d0d0; margin-top: 32px; } @media only screen and (max-width: 1068px) { .more-from-newsroom .tile-item::after { margin-top: 24px; } } .more-from-newsroom .tile-item:nth-child(odd)::after { width: calc(100% + (32px * 2)); } @media only screen and (max-width: 1068px) { .more-from-newsroom .tile-item:nth-child(odd)::after { width: 100%; } } .more-from-newsroom .tile-item:nth-last-of-type(1) { margin-bottom: 0; } .more-from-newsroom .tile-item:nth-last-of-type(1)::after { display: none; } @media only screen and (min-width: 1069px) { .more-from-newsroom .tile-item:nth-last-of-type(2):nth-of-type(odd) { margin-bottom: 0; } .more-from-newsroom .tile-item:nth-last-of-type(2):nth-of-type(odd)::after { display: none; } } .more-from-newsroom .view-archive-wrapper { margin-top: 40px; } @media only screen and (max-width: 1068px) { .more-from-newsroom .view-archive-wrapper { margin-top: 28px; } } @media only screen and (max-width: 734px) { .more-from-newsroom .view-archive-wrapper { margin-top: 24px; } } .section-tiles { align-items: stretch; display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0; } .section-tiles::after { content: ""; flex: 0 0 303px; } .section-tiles { align-items: stretch; display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0; } .section-tiles::after { content: ""; flex: 0 0 303px; } @media only screen and (min-width: 1441px) { .feature-stories .section-tiles::after { content: none; } } .featured-header.with-keyline::after { content: ""; display: block; border-top: 1px solid #d2d2d7; width: 653px; margin-left: auto; margin-right: auto; margin-top: 44px; } @media only screen and (max-width: 1068px) { .featured-header.with-keyline::after { width: 576px; } } @media only screen and (max-width: 734px) { .featured-header.with-keyline::after { width: 87.5%; } } @media only screen and (max-width: 1068px) { .featured-header.with-keyline::after { margin-top: 36px; } } @media only screen and (max-width: 734px) { .featured-header.with-keyline::after { margin-top: 32px; } } .featured-header .category-eyebrow { display: flex; justify-content: center; margin-top: 16px; } @media only screen and (max-width: 734px) { .featured-header .category-eyebrow { margin-top: 20px; } } .featured-header .category-eyebrow__category, .featured-header .category-eyebrow__date { color: #6e6e73; margin: 4px 0; } .featured-header .category-eyebrow__category { display: flex; align-items: center; } .featured-header .category-eyebrow__category::after { color: #6e6e73; content: "\2022"; margin: 0 8px; } .featured-header .page-title .component-content { width: 83.33333%; } @media only screen and (max-width: 1068px) { .featured-header .page-title .component-content { width: 100%; } } @media only screen and (max-width: 734px) { .featured-header .page-title .component-content { margin-left: auto; margin-right: auto; width: 87.5%; } } .featured-header .page-title .hero-headline { font-size: 56px; line-height: 1.07143; font-weight: 700; letter-spacing: -0.005em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; text-align: center; } .featured-header .page-title .hero-headline:lang(ar) { line-height: 1.21429; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ja) { line-height: 1.125; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ko) { line-height: 1.17865; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh) { letter-spacing: 0em; } .featured-header .page-title .hero-headline:lang(th) { line-height: 1.33929; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .featured-header .page-title .hero-headline { font-size: 48px; line-height: 1.08349; font-weight: 700; letter-spacing: -0.003em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ar) { line-height: 1.25; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ja) { line-height: 1.14599; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh) { letter-spacing: 0em; } .featured-header .page-title .hero-headline:lang(th) { line-height: 1.33349; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .featured-header .page-title .hero-headline { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: 0.004em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ar) { line-height: 1.34375; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ja) { line-height: 1.21875; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(ko) { line-height: 1.21875; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .page-title .hero-headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .featured-header .featured-subhead { font-size: 24px; line-height: 1.16667; font-weight: 500; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; text-align: center; margin-top: 20px; margin-bottom: 0; } .featured-header .featured-subhead:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .featured-header .featured-subhead { font-size: 21px; line-height: 1.19048; font-weight: 500; letter-spacing: 0.011em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(ja) { line-height: 1.2381; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(ko) { line-height: 1.2858; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(th) { line-height: 1.381; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(ar) { line-height: 1.4286; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .featured-header .featured-subhead:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .featured-header .featured-subhead { margin-top: 16px; } } .featured-header .share-sheet { text-align: center; margin-top: 24px; margin-bottom: 0; } @media only screen and (max-width: 734px) { .featured-header .share-sheet { margin-top: 20px; } } .theme-dark .featured-header .category-eyebrow__category, .theme-dark .featured-header .category-eyebrow__date { color: #86868b; } .tile-item { position: relative; list-style: none; } .tile-item:first-child.item-1up ~ .tile-item, .tile-item:first-child.item-hero ~ .tile-item, .tile-item:first-child.item-hero-secondary ~ .tile-item, .tile-item:first-child.item-hero-highlight ~ .tile-item, .tile-item:first-child.item-hero-highlight-secondary ~ .tile-item, .tile-item:first-child.item-super-hero ~ .tile-item, .tile-item:first-child.item-super-hero-secondary ~ .tile-item, .tile-item:first-child.item-portrait ~ .tile-item, .tile-item:first-child.item-portrait-secondary ~ .tile-item, .tile-item:first-child.item-hero-reversed ~ .tile-item { margin-top: 36px; } @media only screen and (max-width: 1068px) { .tile-item:first-child.item-1up ~ .tile-item, .tile-item:first-child.item-hero ~ .tile-item, .tile-item:first-child.item-hero-secondary ~ .tile-item, .tile-item:first-child.item-hero-highlight ~ .tile-item, .tile-item:first-child.item-hero-highlight-secondary ~ .tile-item, .tile-item:first-child.item-super-hero ~ .tile-item, .tile-item:first-child.item-super-hero-secondary ~ .tile-item, .tile-item:first-child.item-portrait ~ .tile-item, .tile-item:first-child.item-portrait-secondary ~ .tile-item, .tile-item:first-child.item-hero-reversed ~ .tile-item { margin-top: 24px; } } @media only screen and (max-width: 1068px) { .tile-item:first-child.item-hero-secondary ~ :nth-child(2), .tile-item:first-child.item-hero-highlight-secondary ~ :nth-child(2), .tile-item:first-child.item-super-hero-secondary ~ :nth-child(2), .tile-item:first-child.item-portrait-secondary ~ :nth-child(2) { margin-top: 0; } } @media only screen and (max-width: 734px) { .tile-item:first-child.item-hero-secondary ~ :nth-child(2), .tile-item:first-child.item-hero-highlight-secondary ~ :nth-child(2), .tile-item:first-child.item-super-hero-secondary ~ :nth-child(2), .tile-item:first-child.item-portrait-secondary ~ :nth-child(2) { margin-top: 24px; } } .tile-item:first-child.item-2up ~ :nth-child(2) ~ .tile-item, .tile-item:first-child.item-2up-feature ~ :nth-child(2) ~ .tile-item { margin-top: 36px; } @media only screen and (max-width: 1068px) { .tile-item:first-child.item-2up ~ :nth-child(2) ~ .tile-item, .tile-item:first-child.item-2up-feature ~ :nth-child(2) ~ .tile-item { margin-top: 24px; } } @media only screen and (max-width: 734px) { .tile-item:first-child.item-2up ~ :nth-child(2), .tile-item:first-child.item-2up-feature ~ :nth-child(2) { margin-top: 24px; } } .tile-item:first-child.item-3up ~ :nth-child(3) ~ .tile-item { margin-top: 36px; } @media only screen and (max-width: 1068px) { .tile-item:first-child.item-3up ~ :nth-child(3) ~ .tile-item { margin-top: 24px; } } @media only screen and (max-width: 1068px) { .tile-item:first-child.item-3up ~ :nth-child(3) { margin-top: 24px; } } @media only screen and (max-width: 734px) { .tile-item:first-child.item-3up ~ :nth-child(2) { margin-top: 24px; } } .item-1up, .item-hero, .item-hero-reversed, .item-hero-secondary, .item-hero-highlight, .item-hero-highlight-secondary, .item-portrait, .item-portrait-secondary, .item-super-hero, .item-super-hero-secondary { flex-basis: 100%; } @media only screen and (max-width: 1068px) { .item-2up-tertiary { flex-basis: 100%; } .item-1up-secondary, .item-hero-secondary, .item-hero-highlight-secondary, .item-portrait-secondary, .item-super-hero-secondary { flex-basis: auto; } } @media only screen and (max-width: 734px) { .item-1up, .item-1up-secondary, .item-2up, .item-2up-secondary, .item-2up-tertiary, .item-3up, .item-3up-secondary, .item-hero, .item-hero-highlight-secondary, .item-hero-secondary, .item-hero-reversed, .item-portrait-secondary, .item-super-hero-secondary { flex-basis: 100%; } } .chiclet { margin-left: auto; margin-right: auto; width: 150px; height: 150px; border-radius: 32px; overflow: hidden; } @media only screen and (max-width: 1068px) { .chiclet { width: 110px; height: 110px; border-radius: 24px; } } @media only screen and (max-width: 734px) { .chiclet { width: 104px; height: 104px; border-radius: 24px; } } .chiclet img { width: 100%; } .tile.tile { height: 100%; } .tile.tile-1up { width: 100%; } .tile.tile-2up { flex-direction: column; width: 472px; } .tile.tile-2up .tile__headline { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-2up .tile__headline:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-2up .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-2up .tile__description { padding: 32px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up .tile__media { flex-shrink: 0; } .tile.tile-2up .image { background-size: cover; } .tile.tile-2up .tile__media, .tile.tile-2up .tile__image-container { width: 100%; height: 266px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up .tile__category { margin-bottom: 8px; } .tile.tile-2up .tile__timestamp { margin-top: 12px; } @media only screen and (max-width: 1068px) { .tile.tile-2up { flex-direction: column; width: 333px; } .tile.tile-2up .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up .tile__media { flex-shrink: 0; } .tile.tile-2up .image { background-size: cover; } .tile.tile-2up .tile__media, .tile.tile-2up .tile__image-container { width: 100%; height: 187px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up .tile__category { margin-bottom: 4px; } .tile.tile-2up .tile__timestamp { margin-top: 8px; } } @media only screen and (max-width: 734px) { .tile.tile-2up { flex-direction: column; width: 100%; } .tile.tile-2up .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up .tile__media { flex-shrink: 0; } .tile.tile-2up .image { background-size: cover; } .tile.tile-2up .tile__media, .tile.tile-2up .tile__image-container { width: 100%; height: auto; min-height: auto; flex-basis: auto; flex-shrink: 1; padding-top: 56.25%; height: 0; position: relative; } .tile.tile-2up .tile__media .viewport-image, .tile.tile-2up .tile__media .image, .tile.tile-2up .tile__image-container .viewport-image, .tile.tile-2up .tile__image-container .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile.tile-2up .tile__category { margin-bottom: 8px; } .tile.tile-2up .tile__timestamp { margin-top: 8px; } } .tile.tile-2up-secondary { flex-direction: column; width: 472px; } .tile.tile-2up-secondary .tile__headline { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-2up-secondary .tile__headline:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-2up-secondary .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .tile.tile-2up-secondary .tile__headline { font-size: 17px; line-height: 1.23536; font-weight: 700; letter-spacing: -0.022em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ar) { letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ja) { letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(ko) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh) { letter-spacing: 0em; } .tile.tile-2up-secondary .tile__headline:lang(th) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-2up-secondary .tile__description { padding: 32px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up-secondary .tile__media { flex-shrink: 0; } .tile.tile-2up-secondary .image { background-size: cover; } .tile.tile-2up-secondary .tile__media, .tile.tile-2up-secondary .tile__image-container { width: 100%; height: 266px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up-secondary .tile__category { margin-bottom: 8px; } .tile.tile-2up-secondary .tile__timestamp { margin-top: 12px; } @media only screen and (max-width: 1068px) { .tile.tile-2up-secondary { flex-direction: column; width: 333px; } .tile.tile-2up-secondary .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up-secondary .tile__media { flex-shrink: 0; } .tile.tile-2up-secondary .image { background-size: cover; } .tile.tile-2up-secondary .tile__media, .tile.tile-2up-secondary .tile__image-container { width: 100%; height: 187px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up-secondary .tile__category { margin-bottom: 4px; } .tile.tile-2up-secondary .tile__timestamp { margin-top: 8px; } } @media only screen and (max-width: 734px) { .tile.tile-2up-secondary { border-radius: revert; overflow: revert; z-index: revert; position: revert; background-color: transparent; flex-direction: row; width: 100%; } .tile.tile-2up-secondary .tile__media { border-radius: 12px; overflow: hidden; z-index: 0; position: relative; } .tile.tile-2up-secondary .tile__description { padding: 0 0 0 16px; justify-content: center; flex-basis: 0; } .tile.tile-2up-secondary .tile__media { flex-shrink: 1; } .tile.tile-2up-secondary .image { background-size: contain; } .tile.tile-2up-secondary .tile__media, .tile.tile-2up-secondary .tile__image-container { width: 105px; height: 105px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up-secondary .tile__category { margin-bottom: 4px; } .tile.tile-2up-secondary .tile__timestamp { margin-top: 8px; } } .tile.tile-2up-tertiary { flex-direction: column; width: 472px; } .tile.tile-2up-tertiary .tile__headline { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-2up-tertiary .tile__headline:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-2up-tertiary .tile__headline { font-size: 21px; line-height: 1.19048; font-weight: 700; letter-spacing: 0.011em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ja) { line-height: 1.2381; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ko) { line-height: 1.2858; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(th) { line-height: 1.381; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ar) { line-height: 1.4286; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .tile.tile-2up-tertiary .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-tertiary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-2up-tertiary .tile__description { padding: 32px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up-tertiary .tile__media { flex-shrink: 0; } .tile.tile-2up-tertiary .image { background-size: cover; } .tile.tile-2up-tertiary .tile__media, .tile.tile-2up-tertiary .tile__image-container { width: 100%; height: 266px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up-tertiary .tile__category { margin-bottom: 8px; } .tile.tile-2up-tertiary .tile__timestamp { margin-top: 12px; } @media only screen and (max-width: 1068px) { .tile.tile-2up-tertiary { flex-direction: row; width: 100%; } .tile.tile-2up-tertiary .tile__description { padding: 24px; justify-content: space-between; flex-basis: 0; } .tile.tile-2up-tertiary .tile__media { flex-shrink: 1; } .tile.tile-2up-tertiary .image { background-size: contain; } .tile.tile-2up-tertiary .tile__media, .tile.tile-2up-tertiary .tile__image-container { width: 100%; height: auto; min-height: 255px; flex-basis: 453px; flex-shrink: 1; } .tile.tile-2up-tertiary .tile__category { margin-bottom: 8px; } .tile.tile-2up-tertiary .tile__timestamp { margin-top: 12px; } } @media only screen and (max-width: 734px) { .tile.tile-2up-tertiary { flex-direction: column; width: 100%; } .tile.tile-2up-tertiary .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up-tertiary .tile__media { flex-shrink: 0; } .tile.tile-2up-tertiary .image { background-size: cover; } .tile.tile-2up-tertiary .tile__media, .tile.tile-2up-tertiary .tile__image-container { width: 100%; height: auto; min-height: auto; flex-basis: auto; flex-shrink: 1; padding-top: 56.25%; height: 0; position: relative; } .tile.tile-2up-tertiary .tile__media .viewport-image, .tile.tile-2up-tertiary .tile__media .image, .tile.tile-2up-tertiary .tile__image-container .viewport-image, .tile.tile-2up-tertiary .tile__image-container .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile.tile-2up-tertiary .tile__category { margin-bottom: 8px; } .tile.tile-2up-tertiary .tile__timestamp { margin-top: 8px; } } .tile.tile-2up-feature { display: block; position: relative; flex-direction: column; width: 472px; } .tile.tile-2up-feature .tile__headline { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-2up-feature .tile__headline:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-2up-feature .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-2up-feature .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-2up-feature .tile__gradient { position: absolute; bottom: 0; width: 100%; z-index: 0; } .tile.tile-2up-feature .tile__gradient::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 250%; z-index: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.77311) 12.83%, rgba(0, 0, 0, 0.72685) 24%, rgba(0, 0, 0, 0.66487) 33.77%, rgba(0, 0, 0, 0.59081) 42.37%, rgba(0, 0, 0, 0.50831) 50.07%, rgba(0, 0, 0, 0.421) 57.13%, rgba(0, 0, 0, 0.33252) 63.78%, rgba(0, 0, 0, 0.24652) 70.3%, rgba(0, 0, 0, 0.16663) 76.92%, rgba(0, 0, 0, 0.09648) 83.91%, rgba(0, 0, 0, 0.03973) 91.52%, rgba(0, 0, 0, 0) ); background-size: 100.1% 100.1%; } .tile.tile-2up-feature .tile__gradient.autoplay-controls-wrapper { z-index: 3; } .tile.tile-2up-feature .tile__description { width: 100%; box-sizing: border-box; position: relative; z-index: 2; } .tile.tile-2up-feature .tile__description-has-controls { display: flex; flex-direction: row; } .tile.tile-2up-feature .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 44px); box-sizing: border-box; padding-right: 16px; } @media only screen and (max-width: 1068px) { .tile.tile-2up-feature .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 36px); } } .tile.tile-2up-feature .tile__description-has-controls .autoplay-controls-container { flex: 1 44px; } @media only screen and (max-width: 1068px) { .tile.tile-2up-feature .tile__description-has-controls .autoplay-controls-container { flex: 1 36px; } } .tile.tile-2up-feature .tile__description-content { display: flex; flex-direction: column; } .tile.tile-2up-feature .tile__headline, .tile.tile-2up-feature .tile__category, .tile.tile-2up-feature .tile__timestamp { color: #fff; } .tile.tile-2up-feature .tile__category { margin-bottom: 12px; } .tile.tile-2up-feature .tile__timestamp { margin-top: 12px; } .tile.tile-2up-feature .tile__description { padding: 0 36px 36px; } .tile.tile-2up-feature .tile__media { width: 980px; height: 551px; } @media only screen and (max-width: 1068px) { .tile.tile-2up-feature .tile__category { margin-bottom: 8px; } .tile.tile-2up-feature .tile__timestamp { margin-top: 8px; } .tile.tile-2up-feature .tile__description { padding: 0 24px 24px; } .tile.tile-2up-feature .tile__media { width: 692px; height: 389px; } } @media only screen and (max-width: 734px) { .tile.tile-2up-feature .tile__category { margin-bottom: 4px; } .tile.tile-2up-feature .tile__timestamp { margin-top: 8px; } .tile.tile-2up-feature .tile__description { padding: 0 24px 24px; } .tile.tile-2up-feature .tile__media { width: 100%; padding-top: 125%; height: 0; position: relative; } .tile.tile-2up-feature .tile__media .viewport-image, .tile.tile-2up-feature .tile__media .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .tile.tile-2up-feature .tile__description { padding: 36px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up-feature .tile__media { flex-shrink: 0; } .tile.tile-2up-feature .image { background-size: cover; } .tile.tile-2up-feature .tile__media, .tile.tile-2up-feature .tile__image-container { width: 100%; height: 472px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up-feature .tile__category { margin-bottom: 4px; } .tile.tile-2up-feature .tile__timestamp { margin-top: 12px; } @media only screen and (max-width: 1068px) { .tile.tile-2up-feature { flex-direction: column; width: 334px; } .tile.tile-2up-feature .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up-feature .tile__media { flex-shrink: 0; } .tile.tile-2up-feature .image { background-size: cover; } .tile.tile-2up-feature .tile__media, .tile.tile-2up-feature .tile__image-container { width: 100%; height: 334px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-2up-feature .tile__category { margin-bottom: 4px; } .tile.tile-2up-feature .tile__timestamp { margin-top: 8px; } } @media only screen and (max-width: 734px) { .tile.tile-2up-feature { flex-direction: column; width: 100%; } .tile.tile-2up-feature .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-2up-feature .tile__media { flex-shrink: 0; } .tile.tile-2up-feature .image { background-size: cover; } .tile.tile-2up-feature .tile__media, .tile.tile-2up-feature .tile__image-container { width: 100%; height: auto; min-height: auto; flex-basis: auto; flex-shrink: 1; padding-top: 56.25%; height: 0; position: relative; } .tile.tile-2up-feature .tile__media .viewport-image, .tile.tile-2up-feature .tile__media .image, .tile.tile-2up-feature .tile__image-container .viewport-image, .tile.tile-2up-feature .tile__image-container .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile.tile-2up-feature .tile__category { margin-bottom: 8px; } .tile.tile-2up-feature .tile__timestamp { margin-top: 8px; } .tile.tile-2up-feature .tile__gradient { position: relative; } .tile.tile-2up-feature .tile__gradient::before { content: none; } .tile.tile-2up-feature .viewport-image { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } .tile.tile-3up { flex-direction: column; width: 303px; } .tile.tile-3up .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-3up .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-3up .tile__media { flex-shrink: 0; } .tile.tile-3up .image { background-size: cover; } .tile.tile-3up .tile__media, .tile.tile-3up .tile__image-container { width: 100%; height: 170px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-3up .tile__category { margin-bottom: 4px; } .tile.tile-3up .tile__timestamp { margin-top: 8px; } @media only screen and (max-width: 1068px) { .tile.tile-3up { flex-direction: column; width: 333px; } .tile.tile-3up .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-3up .tile__media { flex-shrink: 0; } .tile.tile-3up .image { background-size: cover; } .tile.tile-3up .tile__media, .tile.tile-3up .tile__image-container { width: 100%; height: 187px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-3up .tile__category { margin-bottom: 4px; } .tile.tile-3up .tile__timestamp { margin-top: 8px; } } @media only screen and (max-width: 734px) { .tile.tile-3up { flex-direction: column; width: 100%; } .tile.tile-3up .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-3up .tile__media { flex-shrink: 0; } .tile.tile-3up .image { background-size: cover; } .tile.tile-3up .tile__media, .tile.tile-3up .tile__image-container { width: 100%; height: auto; min-height: auto; flex-basis: auto; flex-shrink: 1; padding-top: 56.25%; height: 0; position: relative; } .tile.tile-3up .tile__media .viewport-image, .tile.tile-3up .tile__media .image, .tile.tile-3up .tile__image-container .viewport-image, .tile.tile-3up .tile__image-container .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile.tile-3up .tile__category { margin-bottom: 8px; } .tile.tile-3up .tile__timestamp { margin-top: 8px; } } .tile.tile-3up-secondary { flex-direction: column; width: 303px; } .tile.tile-3up-secondary .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-3up-secondary .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 734px) { .tile.tile-3up-secondary .tile__headline { font-size: 17px; line-height: 1.23536; font-weight: 700; letter-spacing: -0.022em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(ar) { letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(ja) { letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(ko) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh) { letter-spacing: 0em; } .tile.tile-3up-secondary .tile__headline:lang(th) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-3up-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-3up-secondary .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-3up-secondary .tile__media { flex-shrink: 0; } .tile.tile-3up-secondary .image { background-size: cover; } .tile.tile-3up-secondary .tile__media, .tile.tile-3up-secondary .tile__image-container { width: 100%; height: 170px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-3up-secondary .tile__category { margin-bottom: 4px; } .tile.tile-3up-secondary .tile__timestamp { margin-top: 8px; } @media only screen and (max-width: 1068px) { .tile.tile-3up-secondary { flex-direction: column; width: 333px; } .tile.tile-3up-secondary .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-3up-secondary .tile__media { flex-shrink: 0; } .tile.tile-3up-secondary .image { background-size: cover; } .tile.tile-3up-secondary .tile__media, .tile.tile-3up-secondary .tile__image-container { width: 100%; height: 187px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-3up-secondary .tile__category { margin-bottom: 4px; } .tile.tile-3up-secondary .tile__timestamp { margin-top: 8px; } } @media only screen and (max-width: 734px) { .tile.tile-3up-secondary { border-radius: revert; overflow: revert; z-index: revert; position: revert; background-color: transparent; flex-direction: row; width: 100%; } .tile.tile-3up-secondary .tile__media { border-radius: 12px; overflow: hidden; z-index: 0; position: relative; } .tile.tile-3up-secondary .tile__description { padding: 0 0 0 16px; justify-content: center; flex-basis: 0; } .tile.tile-3up-secondary .tile__media { flex-shrink: 1; } .tile.tile-3up-secondary .image { background-size: contain; } .tile.tile-3up-secondary .tile__media, .tile.tile-3up-secondary .tile__image-container { width: 105px; height: 105px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-3up-secondary .tile__category { margin-bottom: 4px; } .tile.tile-3up-secondary .tile__timestamp { margin-top: 8px; } } .tile.tile-hero { flex-direction: row; width: 100%; } .tile.tile-hero .tile__headline { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: 0.004em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-hero .tile__headline:lang(ar) { line-height: 1.34375; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ja) { line-height: 1.21875; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ko) { line-height: 1.21875; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-hero .tile__headline { font-size: 21px; line-height: 1.19048; font-weight: 700; letter-spacing: 0.011em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ja) { line-height: 1.2381; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ko) { line-height: 1.2858; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(th) { line-height: 1.381; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ar) { line-height: 1.4286; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .tile.tile-hero .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-hero .tile__description { padding: 32px; justify-content: space-between; flex-basis: 0; } .tile.tile-hero .tile__media { flex-shrink: 1; } .tile.tile-hero .image { background-size: contain; } .tile.tile-hero .tile__media, .tile.tile-hero .tile__image-container { width: 100%; height: auto; min-height: 362px; flex-basis: 643px; flex-shrink: 1; } .tile.tile-hero .tile__category { margin-bottom: 8px; } .tile.tile-hero .tile__timestamp { margin-top: 12px; } @media only screen and (max-width: 1068px) { .tile.tile-hero { flex-direction: row; width: 100%; } .tile.tile-hero .tile__description { padding: 24px; justify-content: space-between; flex-basis: 0; } .tile.tile-hero .tile__media { flex-shrink: 1; } .tile.tile-hero .image { background-size: contain; } .tile.tile-hero .tile__media, .tile.tile-hero .tile__image-container { width: 100%; height: auto; min-height: 255px; flex-basis: 453px; flex-shrink: 1; } .tile.tile-hero .tile__category { margin-bottom: 8px; } .tile.tile-hero .tile__timestamp { margin-top: 12px; } } @media only screen and (max-width: 734px) { .tile.tile-hero { flex-direction: column; width: 100%; } .tile.tile-hero .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-hero .tile__media { flex-shrink: 0; } .tile.tile-hero .image { background-size: cover; } .tile.tile-hero .tile__media, .tile.tile-hero .tile__image-container { width: 100%; height: auto; min-height: auto; flex-basis: auto; flex-shrink: 1; padding-top: 56.25%; height: 0; position: relative; } .tile.tile-hero .tile__media .viewport-image, .tile.tile-hero .tile__media .image, .tile.tile-hero .tile__image-container .viewport-image, .tile.tile-hero .tile__image-container .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile.tile-hero .tile__category { margin-bottom: 8px; } .tile.tile-hero .tile__timestamp { margin-top: 8px; } } .tile.tile-hero .tile__headline:lang(ar) { -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } @media only screen and (max-width: 734px) { .tile.tile-hero .tile__headline:lang(ar) { -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } } .tile.tile-hero:lang(ar) .image { background-size: cover; } .tile.tile-hero-reversed { flex-direction: row-reverse; width: 100%; } .tile.tile-hero-reversed .tile__headline { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: 0.004em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-hero-reversed .tile__headline:lang(ar) { line-height: 1.34375; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ja) { line-height: 1.21875; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ko) { line-height: 1.21875; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-hero-reversed .tile__headline { font-size: 21px; line-height: 1.19048; font-weight: 700; letter-spacing: 0.011em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ja) { line-height: 1.2381; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ko) { line-height: 1.2858; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(th) { line-height: 1.381; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ar) { line-height: 1.4286; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .tile.tile-hero-reversed .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-reversed .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-hero-reversed .tile__description { padding: 32px; justify-content: space-between; flex-basis: 0; } .tile.tile-hero-reversed .tile__media { flex-shrink: 1; } .tile.tile-hero-reversed .image { background-size: contain; } .tile.tile-hero-reversed .tile__media, .tile.tile-hero-reversed .tile__image-container { width: 100%; height: auto; min-height: 362px; flex-basis: 643px; flex-shrink: 1; } .tile.tile-hero-reversed .tile__category { margin-bottom: 8px; } .tile.tile-hero-reversed .tile__timestamp { margin-top: 12px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-reversed { flex-direction: row-reverse; width: 100%; } .tile.tile-hero-reversed .tile__description { padding: 24px; justify-content: space-between; flex-basis: 0; } .tile.tile-hero-reversed .tile__media { flex-shrink: 1; } .tile.tile-hero-reversed .image { background-size: contain; } .tile.tile-hero-reversed .tile__media, .tile.tile-hero-reversed .tile__image-container { width: 100%; height: auto; min-height: 255px; flex-basis: 453px; flex-shrink: 1; } .tile.tile-hero-reversed .tile__category { margin-bottom: 8px; } .tile.tile-hero-reversed .tile__timestamp { margin-top: 12px; } } @media only screen and (max-width: 734px) { .tile.tile-hero-reversed { flex-direction: column; width: 100%; } .tile.tile-hero-reversed .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-hero-reversed .tile__media { flex-shrink: 0; } .tile.tile-hero-reversed .image { background-size: cover; } .tile.tile-hero-reversed .tile__media, .tile.tile-hero-reversed .tile__image-container { width: 100%; height: auto; min-height: auto; flex-basis: auto; flex-shrink: 1; padding-top: 56.25%; height: 0; position: relative; } .tile.tile-hero-reversed .tile__media .viewport-image, .tile.tile-hero-reversed .tile__media .image, .tile.tile-hero-reversed .tile__image-container .viewport-image, .tile.tile-hero-reversed .tile__image-container .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile.tile-hero-reversed .tile__category { margin-bottom: 8px; } .tile.tile-hero-reversed .tile__timestamp { margin-top: 8px; } } .tile.tile-hero-reversed:lang(ar) .image { background-size: cover; } .tile.tile-hero-highlight .tile__headline, .tile.tile-hero-highlight-secondary .tile__headline { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: 0em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-hero-highlight .tile__headline:lang(ar), .tile.tile-hero-highlight-secondary .tile__headline:lang(ar) { line-height: 1.3; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ja), .tile.tile-hero-highlight-secondary .tile__headline:lang(ja) { line-height: 1.175; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ko), .tile.tile-hero-highlight-secondary .tile__headline:lang(ko) { line-height: 1.2; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(th), .tile.tile-hero-highlight-secondary .tile__headline:lang(th) { line-height: 1.35; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-CN), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-HK), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-MO), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-TW), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight .tile__headline, .tile.tile-hero-highlight-secondary .tile__headline { font-size: 28px; line-height: 1.14286; font-weight: 700; letter-spacing: 0.007em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ko), .tile.tile-hero-highlight-secondary .tile__headline:lang(ko) { line-height: 1.25; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(th), .tile.tile-hero-highlight-secondary .tile__headline:lang(th) { line-height: 1.39286; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ar), .tile.tile-hero-highlight-secondary .tile__headline:lang(ar) { font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ja), .tile.tile-hero-highlight-secondary .tile__headline:lang(ja) { font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-CN), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-HK), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-MO), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-TW), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .tile.tile-hero-highlight .tile__headline, .tile.tile-hero-highlight-secondary .tile__headline { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ar), .tile.tile-hero-highlight-secondary .tile__headline:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ja), .tile.tile-hero-highlight-secondary .tile__headline:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(ko), .tile.tile-hero-highlight-secondary .tile__headline:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(th), .tile.tile-hero-highlight-secondary .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-CN), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-HK), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-MO), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight .tile__headline:lang(zh-TW), .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } html.js .tile.tile-hero-highlight[data-progressive-load], html.js .tile.tile-hero-highlight-secondary[data-progressive-load] { opacity: 0; } html.js .tile.tile-hero-highlight.large-load, html.js .tile.tile-hero-highlight-secondary.large-load { opacity: 0; transition: none; } html.js .tile.tile-hero-highlight.large-loaded, html.js .tile.tile-hero-highlight-secondary.large-loaded { opacity: 1; transition: opacity 1s cubic-bezier(0.4, 0, 0.25, 1) 0ms; } @media only screen and (max-width: 1068px) { html.js .tile.tile-hero-highlight.medium-load, html.js .tile.tile-hero-highlight-secondary.medium-load { opacity: 0; transition: none; } html.js .tile.tile-hero-highlight.medium-loaded, html.js .tile.tile-hero-highlight-secondary.medium-loaded { opacity: 1; transition: opacity 1s cubic-bezier(0.4, 0, 0.25, 1) 0ms; } } @media only screen and (max-width: 734px) { html.js .tile.tile-hero-highlight.small-load, html.js .tile.tile-hero-highlight-secondary.small-load { opacity: 0; transition: none; } html.js .tile.tile-hero-highlight.small-loaded, html.js .tile.tile-hero-highlight-secondary.small-loaded { opacity: 1; transition: opacity 1s cubic-bezier(0.4, 0, 0.25, 1) 0ms; } } .tile.tile-hero-highlight { display: block; position: relative; } .tile.tile-hero-highlight .tile__gradient { position: absolute; bottom: 0; width: 100%; z-index: 0; } .tile.tile-hero-highlight .tile__gradient::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 250%; z-index: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.77311) 12.83%, rgba(0, 0, 0, 0.72685) 24%, rgba(0, 0, 0, 0.66487) 33.77%, rgba(0, 0, 0, 0.59081) 42.37%, rgba(0, 0, 0, 0.50831) 50.07%, rgba(0, 0, 0, 0.421) 57.13%, rgba(0, 0, 0, 0.33252) 63.78%, rgba(0, 0, 0, 0.24652) 70.3%, rgba(0, 0, 0, 0.16663) 76.92%, rgba(0, 0, 0, 0.09648) 83.91%, rgba(0, 0, 0, 0.03973) 91.52%, rgba(0, 0, 0, 0) ); background-size: 100.1% 100.1%; } .tile.tile-hero-highlight .tile__gradient.autoplay-controls-wrapper { z-index: 3; } .tile.tile-hero-highlight .tile__description { width: 100%; box-sizing: border-box; position: relative; z-index: 2; } .tile.tile-hero-highlight .tile__description-has-controls { display: flex; flex-direction: row; } .tile.tile-hero-highlight .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 44px); box-sizing: border-box; padding-right: 16px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 36px); } } .tile.tile-hero-highlight .tile__description-has-controls .autoplay-controls-container { flex: 1 44px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight .tile__description-has-controls .autoplay-controls-container { flex: 1 36px; } } .tile.tile-hero-highlight .tile__description-content { display: flex; flex-direction: column; } .tile.tile-hero-highlight .tile__headline, .tile.tile-hero-highlight .tile__category, .tile.tile-hero-highlight .tile__timestamp { color: #fff; } .tile.tile-hero-highlight .tile__category { margin-bottom: 12px; } .tile.tile-hero-highlight .tile__timestamp { margin-top: 12px; } .tile.tile-hero-highlight .tile__description { padding: 0 36px 36px; } .tile.tile-hero-highlight .tile__media { width: 980px; height: 551px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight .tile__category { margin-bottom: 8px; } .tile.tile-hero-highlight .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight .tile__media { width: 692px; height: 389px; } } @media only screen and (max-width: 734px) { .tile.tile-hero-highlight .tile__category { margin-bottom: 4px; } .tile.tile-hero-highlight .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight .tile__media { width: 100%; padding-top: 125%; height: 0; position: relative; } .tile.tile-hero-highlight .tile__media .viewport-image, .tile.tile-hero-highlight .tile__media .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } @media only screen and (min-width: 1069px) { .tile.tile-hero-highlight-secondary { display: block; position: relative; } .tile.tile-hero-highlight-secondary .tile__gradient { position: absolute; bottom: 0; width: 100%; z-index: 0; } .tile.tile-hero-highlight-secondary .tile__gradient::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 250%; z-index: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.77311) 12.83%, rgba(0, 0, 0, 0.72685) 24%, rgba(0, 0, 0, 0.66487) 33.77%, rgba(0, 0, 0, 0.59081) 42.37%, rgba(0, 0, 0, 0.50831) 50.07%, rgba(0, 0, 0, 0.421) 57.13%, rgba(0, 0, 0, 0.33252) 63.78%, rgba(0, 0, 0, 0.24652) 70.3%, rgba(0, 0, 0, 0.16663) 76.92%, rgba(0, 0, 0, 0.09648) 83.91%, rgba(0, 0, 0, 0.03973) 91.52%, rgba(0, 0, 0, 0) ); background-size: 100.1% 100.1%; } .tile.tile-hero-highlight-secondary .tile__gradient.autoplay-controls-wrapper { z-index: 3; } .tile.tile-hero-highlight-secondary .tile__description { width: 100%; box-sizing: border-box; position: relative; z-index: 2; } .tile.tile-hero-highlight-secondary .tile__description-has-controls { display: flex; flex-direction: row; } .tile.tile-hero-highlight-secondary .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 44px); box-sizing: border-box; padding-right: 16px; } } @media only screen and (min-width: 1069px) and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 36px); } } @media only screen and (min-width: 1069px) { .tile.tile-hero-highlight-secondary .tile__description-has-controls .autoplay-controls-container { flex: 1 44px; } } @media only screen and (min-width: 1069px) and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .tile__description-has-controls .autoplay-controls-container { flex: 1 36px; } } @media only screen and (min-width: 1069px) { .tile.tile-hero-highlight-secondary .tile__description-content { display: flex; flex-direction: column; } .tile.tile-hero-highlight-secondary .tile__headline, .tile.tile-hero-highlight-secondary .tile__category, .tile.tile-hero-highlight-secondary .tile__timestamp { color: #fff; } .tile.tile-hero-highlight-secondary .tile__category { margin-bottom: 12px; } .tile.tile-hero-highlight-secondary .tile__timestamp { margin-top: 12px; } .tile.tile-hero-highlight-secondary .tile__description { padding: 0 36px 36px; } .tile.tile-hero-highlight-secondary .tile__media { width: 980px; height: 551px; } } @media only screen and (min-width: 1069px) and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .tile__category { margin-bottom: 8px; } .tile.tile-hero-highlight-secondary .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight-secondary .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight-secondary .tile__media { width: 692px; height: 389px; } } @media only screen and (min-width: 1069px) and (max-width: 734px) { .tile.tile-hero-highlight-secondary .tile__category { margin-bottom: 4px; } .tile.tile-hero-highlight-secondary .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight-secondary .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight-secondary .tile__media { width: 100%; padding-top: 125%; height: 0; position: relative; } .tile.tile-hero-highlight-secondary .tile__media .viewport-image, .tile.tile-hero-highlight-secondary .tile__media .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight-secondary { flex-direction: column; width: 333px; } .tile.tile-hero-highlight-secondary .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-hero-highlight-secondary .tile__media { flex-shrink: 0; } .tile.tile-hero-highlight-secondary .image { background-size: cover; } .tile.tile-hero-highlight-secondary .tile__media, .tile.tile-hero-highlight-secondary .tile__image-container { width: 100%; height: 187px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-hero-highlight-secondary .tile__category { margin-bottom: 4px; } .tile.tile-hero-highlight-secondary .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight-secondary .tile__headline { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-hero-highlight-secondary .tile__headline:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 1068px) and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .autoplay-controls-container { position: absolute; top: calc(187px - (36px + 16px)); } .tile.tile-hero-highlight-secondary .tile__gradient { flex: 1; } .tile.tile-hero-highlight-secondary .tile__description { box-sizing: border-box; height: 100%; } .tile.tile-hero-highlight-secondary .tile__description-content { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } } @media only screen and (max-width: 734px) { .tile.tile-hero-highlight-secondary { display: block; position: relative; width: 100%; } .tile.tile-hero-highlight-secondary .tile__gradient { position: absolute; bottom: 0; width: 100%; z-index: 0; } .tile.tile-hero-highlight-secondary .tile__gradient::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 250%; z-index: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.77311) 12.83%, rgba(0, 0, 0, 0.72685) 24%, rgba(0, 0, 0, 0.66487) 33.77%, rgba(0, 0, 0, 0.59081) 42.37%, rgba(0, 0, 0, 0.50831) 50.07%, rgba(0, 0, 0, 0.421) 57.13%, rgba(0, 0, 0, 0.33252) 63.78%, rgba(0, 0, 0, 0.24652) 70.3%, rgba(0, 0, 0, 0.16663) 76.92%, rgba(0, 0, 0, 0.09648) 83.91%, rgba(0, 0, 0, 0.03973) 91.52%, rgba(0, 0, 0, 0) ); background-size: 100.1% 100.1%; } .tile.tile-hero-highlight-secondary .tile__gradient.autoplay-controls-wrapper { z-index: 3; } .tile.tile-hero-highlight-secondary .tile__description { width: 100%; box-sizing: border-box; position: relative; z-index: 2; } .tile.tile-hero-highlight-secondary .tile__description-has-controls { display: flex; flex-direction: row; } .tile.tile-hero-highlight-secondary .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 44px); box-sizing: border-box; padding-right: 16px; } } @media only screen and (max-width: 734px) and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 36px); } } @media only screen and (max-width: 734px) { .tile.tile-hero-highlight-secondary .tile__description-has-controls .autoplay-controls-container { flex: 1 44px; } } @media only screen and (max-width: 734px) and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .tile__description-has-controls .autoplay-controls-container { flex: 1 36px; } } @media only screen and (max-width: 734px) { .tile.tile-hero-highlight-secondary .tile__description-content { display: flex; flex-direction: column; } .tile.tile-hero-highlight-secondary .tile__headline, .tile.tile-hero-highlight-secondary .tile__category, .tile.tile-hero-highlight-secondary .tile__timestamp { color: #fff; } .tile.tile-hero-highlight-secondary .tile__category { margin-bottom: 12px; } .tile.tile-hero-highlight-secondary .tile__timestamp { margin-top: 12px; } .tile.tile-hero-highlight-secondary .tile__description { padding: 0 36px 36px; } .tile.tile-hero-highlight-secondary .tile__media { width: 980px; height: 551px; } } @media only screen and (max-width: 734px) and (max-width: 1068px) { .tile.tile-hero-highlight-secondary .tile__category { margin-bottom: 8px; } .tile.tile-hero-highlight-secondary .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight-secondary .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight-secondary .tile__media { width: 692px; height: 389px; } } @media only screen and (max-width: 734px) and (max-width: 734px) { .tile.tile-hero-highlight-secondary .tile__category { margin-bottom: 4px; } .tile.tile-hero-highlight-secondary .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight-secondary .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight-secondary .tile__media { width: 100%; padding-top: 125%; height: 0; position: relative; } .tile.tile-hero-highlight-secondary .tile__media .viewport-image, .tile.tile-hero-highlight-secondary .tile__media .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .tile.tile-hero-highlight-feature { display: block; position: relative; display: flex; } .tile.tile-hero-highlight-feature .tile__headline { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: 0em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 4; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-hero-highlight-feature .tile__headline:lang(ar) { line-height: 1.3; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ja) { line-height: 1.175; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ko) { line-height: 1.2; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(th) { line-height: 1.35; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight-feature .tile__headline { font-size: 28px; line-height: 1.14286; font-weight: 700; letter-spacing: 0.007em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ko) { line-height: 1.25; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(th) { line-height: 1.39286; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ar) { font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ja) { font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .tile.tile-hero-highlight-feature .tile__headline { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-highlight-feature .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-hero-highlight-feature .tile__gradient { position: absolute; bottom: 0; width: 100%; z-index: 0; } .tile.tile-hero-highlight-feature .tile__gradient::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 250%; z-index: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.77311) 12.83%, rgba(0, 0, 0, 0.72685) 24%, rgba(0, 0, 0, 0.66487) 33.77%, rgba(0, 0, 0, 0.59081) 42.37%, rgba(0, 0, 0, 0.50831) 50.07%, rgba(0, 0, 0, 0.421) 57.13%, rgba(0, 0, 0, 0.33252) 63.78%, rgba(0, 0, 0, 0.24652) 70.3%, rgba(0, 0, 0, 0.16663) 76.92%, rgba(0, 0, 0, 0.09648) 83.91%, rgba(0, 0, 0, 0.03973) 91.52%, rgba(0, 0, 0, 0) ); background-size: 100.1% 100.1%; } .tile.tile-hero-highlight-feature .tile__gradient.autoplay-controls-wrapper { z-index: 3; } .tile.tile-hero-highlight-feature .tile__description { width: 100%; box-sizing: border-box; position: relative; z-index: 2; } .tile.tile-hero-highlight-feature .tile__description-has-controls { display: flex; flex-direction: row; } .tile.tile-hero-highlight-feature .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 44px); box-sizing: border-box; padding-right: 16px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight-feature .tile__description-has-controls .tile__description-content { flex: 1 calc(100% - 36px); } } .tile.tile-hero-highlight-feature .tile__description-has-controls .autoplay-controls-container { flex: 1 44px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight-feature .tile__description-has-controls .autoplay-controls-container { flex: 1 36px; } } .tile.tile-hero-highlight-feature .tile__description-content { display: flex; flex-direction: column; } .tile.tile-hero-highlight-feature .tile__headline, .tile.tile-hero-highlight-feature .tile__category, .tile.tile-hero-highlight-feature .tile__timestamp { color: #fff; } .tile.tile-hero-highlight-feature .tile__category { margin-bottom: 12px; } .tile.tile-hero-highlight-feature .tile__timestamp { margin-top: 12px; } .tile.tile-hero-highlight-feature .tile__description { padding: 0 36px 36px; } .tile.tile-hero-highlight-feature .tile__media { width: 980px; height: 551px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-highlight-feature .tile__category { margin-bottom: 8px; } .tile.tile-hero-highlight-feature .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight-feature .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight-feature .tile__media { width: 692px; height: 389px; } } @media only screen and (max-width: 734px) { .tile.tile-hero-highlight-feature .tile__category { margin-bottom: 4px; } .tile.tile-hero-highlight-feature .tile__timestamp { margin-top: 8px; } .tile.tile-hero-highlight-feature .tile__description { padding: 0 24px 24px; } .tile.tile-hero-highlight-feature .tile__media { width: 100%; padding-top: 125%; height: 0; position: relative; } .tile.tile-hero-highlight-feature .tile__media .viewport-image, .tile.tile-hero-highlight-feature .tile__media .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .tile.tile-hero-secondary { flex-direction: row; width: 100%; } .tile.tile-hero-secondary .tile__headline { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: 0.004em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-hero-secondary .tile__headline:lang(ar) { line-height: 1.34375; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(ja) { line-height: 1.21875; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(ko) { line-height: 1.21875; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .tile.tile-hero-secondary .tile__headline { font-size: 19px; line-height: 1.21053; font-weight: 700; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(ar) { line-height: 1.36844; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(ja) { line-height: 1.26316; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(ko) { line-height: 1.31579; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-hero-secondary .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .tile.tile-hero-secondary .tile__description { padding: 32px; justify-content: space-between; flex-basis: 0; } .tile.tile-hero-secondary .tile__media { flex-shrink: 1; } .tile.tile-hero-secondary .image { background-size: contain; } .tile.tile-hero-secondary .tile__media, .tile.tile-hero-secondary .tile__image-container { width: 100%; height: auto; min-height: 362px; flex-basis: 643px; flex-shrink: 1; } .tile.tile-hero-secondary .tile__category { margin-bottom: 8px; } .tile.tile-hero-secondary .tile__timestamp { margin-top: 12px; } @media only screen and (max-width: 1068px) { .tile.tile-hero-secondary { flex-direction: column; width: 333px; } .tile.tile-hero-secondary .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-hero-secondary .tile__media { flex-shrink: 0; } .tile.tile-hero-secondary .image { background-size: cover; } .tile.tile-hero-secondary .tile__media, .tile.tile-hero-secondary .tile__image-container { width: 100%; height: 187px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-hero-secondary .tile__category { margin-bottom: 4px; } .tile.tile-hero-secondary .tile__timestamp { margin-top: 8px; } } @media only screen and (max-width: 734px) { .tile.tile-hero-secondary { flex-direction: column; width: 100%; } .tile.tile-hero-secondary .tile__description { padding: 24px; justify-content: space-between; flex-basis: auto; } .tile.tile-hero-secondary .tile__media { flex-shrink: 0; } .tile.tile-hero-secondary .image { background-size: cover; } .tile.tile-hero-secondary .tile__media, .tile.tile-hero-secondary .tile__image-container { width: 100%; height: auto; min-height: auto; flex-basis: auto; flex-shrink: 1; padding-top: 56.25%; height: 0; position: relative; } .tile.tile-hero-secondary .tile__media .viewport-image, .tile.tile-hero-secondary .tile__media .image, .tile.tile-hero-secondary .tile__image-container .viewport-image, .tile.tile-hero-secondary .tile__image-container .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tile.tile-hero-secondary .tile__category { margin-bottom: 8px; } .tile.tile-hero-secondary .tile__timestamp { margin-top: 8px; } } .tile.tile-hero-secondary:lang(ar) .image { background-size: cover; } @media (hover: hover) { html.no-touch.no-reduced-motion .tile.tile-list:hover .image, html.no-touch.no-reduced-motion .tile.tile-list:hover .media--video { transform: scale(1.05); } } @media only screen and (hover: hover) and (max-width: 734px) { html.no-touch .tile.tile-list:hover .image, html.no-touch .tile.tile-list:hover .media--video { transform: none; } } html.no-touch.no-reduced-motion .tile.tile-list[data-focus-method="key"] .image, html.no-touch.no-reduced-motion .tile.tile-list[data-focus-method="key"] .media--video { transform: scale(1.05); } @media only screen and (max-width: 734px) { html.no-touch .tile.tile-list[data-focus-method="key"] .image, html.no-touch .tile.tile-list[data-focus-method="key"] .media--video { transform: none; } } .cover { height: 100%; width: 100%; object-fit: cover; } .view-archive-wrapper { margin-top: 32px; font-size: 17px; line-height: 1.23536; font-weight: 500; letter-spacing: -0.022em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; text-align: center; } @media only screen and (max-width: 1068px) { .view-archive-wrapper { margin-top: 28px; } } @media only screen and (max-width: 734px) { .view-archive-wrapper { margin-top: 24px; } } .cta-primary-light { letter-spacing: 0em; border-radius: 30px; display: inline-block; transition: background-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms, border-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms, color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms; font-size: 17px; line-height: 1.23536; font-weight: 600; letter-spacing: -0.022em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; border: 2px solid; padding: 10px 24px 9px; border-color: #1d1d1f; color: #161617; } .cta-primary-light:visited { text-decoration: none; } .cta-primary-light:hover { background: #1d1d1f; border-color: #1d1d1f; color: #f5f5f7; text-decoration: none; } .tile.tile-list { border-radius: revert; overflow: revert; z-index: revert; position: revert; background-color: transparent; flex-direction: row; width: 457px; } .tile.tile-list .tile__headline { font-size: 17px; line-height: 1.23536; font-weight: 700; letter-spacing: -0.022em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-line-clamp: 6; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .tile.tile-list .tile__headline:lang(ar) { letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__headline:lang(ja) { letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__headline:lang(ko) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__headline:lang(zh) { letter-spacing: 0em; } .tile.tile-list .tile__headline:lang(th) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .tile.tile-list .tile__media { border-radius: 16px; overflow: hidden; z-index: 0; position: relative; } .tile.tile-list .tile__description { padding: 0 0 0 24px; justify-content: center; flex-basis: 0; } .tile.tile-list .tile__media { flex-shrink: 1; } .tile.tile-list .image { background-size: contain; } .tile.tile-list .tile__media, .tile.tile-list .tile__image-container { width: 132px; height: 132px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-list .tile__category { margin-bottom: 4px; } .tile.tile-list .tile__timestamp { margin-top: 8px; } @media only screen and (max-width: 1068px) { .tile.tile-list { flex-direction: row; width: 631px; } .tile.tile-list .tile__description { padding: 0 0 0 24px; justify-content: center; flex-basis: 0; } .tile.tile-list .tile__media { flex-shrink: 1; } .tile.tile-list .image { background-size: contain; } .tile.tile-list .tile__media, .tile.tile-list .tile__image-container { width: 132px; height: 132px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-list .tile__category { margin-bottom: 4px; } .tile.tile-list .tile__timestamp { margin-top: 8px; } } @media only screen and (max-width: 734px) { .tile.tile-list { flex-direction: row; width: 100%; } .tile.tile-list .tile__description { padding: 0 0 0 16px; justify-content: center; flex-basis: 0; } .tile.tile-list .tile__media { flex-shrink: 1; } .tile.tile-list .image { background-size: contain; } .tile.tile-list .tile__media, .tile.tile-list .tile__image-container { width: 105px; height: 105px; min-height: auto; flex-basis: auto; flex-shrink: 1; } .tile.tile-list .tile__category { margin-bottom: 4px; } .tile.tile-list .tile__timestamp { margin-top: 8px; } .tile.tile-list .tile__media { border-radius: 12px; } } @media (hover: hover) { html.no-touch.no-reduced-motion .tile.tile-list:hover .image, html.no-touch.no-reduced-motion .tile.tile-list:hover .media--video { transform: scale(1.05); } } @media only screen and (hover: hover) and (max-width: 734px) { html.no-touch .tile.tile-list:hover .image, html.no-touch .tile.tile-list:hover .media--video { transform: none; } } html.no-touch.no-reduced-motion .tile.tile-list[data-focus-method="key"] .image, html.no-touch.no-reduced-motion .tile.tile-list[data-focus-method="key"] .media--video { transform: scale(1.05); } @media only screen and (max-width: 734px) { html.no-touch .tile.tile-list[data-focus-method="key"] .image, html.no-touch .tile.tile-list[data-focus-method="key"] .media--video { transform: none; } } .page-title.component { margin-top: 0; margin-bottom: 0; } .page-title .hero-headline { font-size: 48px; line-height: 1.08349; font-weight: 700; letter-spacing: -0.003em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ar) { line-height: 1.25; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ja) { line-height: 1.14599; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ko) { line-height: 1.1875; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh) { letter-spacing: 0em; } .page-title .hero-headline:lang(th) { line-height: 1.33349; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .page-title .hero-headline { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: 0em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ar) { line-height: 1.3; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ja) { line-height: 1.175; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ko) { line-height: 1.2; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(th) { line-height: 1.35; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .page-title .hero-headline { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: 0.004em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ar) { line-height: 1.34375; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ja) { line-height: 1.21875; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(ko) { line-height: 1.21875; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-title .hero-headline:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .category.component { margin-top: 0; margin-bottom: 20px; } .component { margin-left: auto; margin-right: auto; width: 980px; } .component::before, .component::after { content: " "; display: table; } .component::after { clear: both; } @media only screen and (min-width: 1441px) { .component { margin-left: auto; margin-right: auto; width: 980px; } } @media only screen and (max-width: 1068px) { .component { margin-left: auto; margin-right: auto; width: 692px; } } @media only screen and (max-width: 734px) { .component { margin-left: auto; margin-right: auto; width: 87.5%; } } .component { margin-top: 44px; margin-bottom: 44px; } @media only screen and (max-width: 1068px) { .component { margin-top: 36px; margin-bottom: 36px; } } @media only screen and (max-width: 734px) { .component { margin-top: 32px; margin-bottom: 32px; } } @media only screen and (max-width: 734px) { .component { max-width: 414px; width: 100%; margin-left: auto; margin-right: auto; } } .page-body { font-size: 17px; line-height: 1.4211; font-weight: 400; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body:lang(zh-CN) { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI' , "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .page-body { font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body:lang(zh) { letter-spacing: 0em; } } .page-body-media { margin-top: 0; margin-bottom: 15px; width: 291px; } @media only screen and (max-width: 1068px) { .page-body-media { width: 206px; } } @media only screen and (max-width: 734px) { .page-body-media { width: 100%; } } .page-body-media.left { float: left; margin-left: -12.5%; margin-right: 36px; } @media only screen and (max-width: 1068px) { .page-body-media.left { margin-left: -10%; margin-right: 24px; } } @media only screen and (max-width: 734px) { .page-body-media.left { margin-right: 0; } } .page-body-media.right { float: right; margin-right: -12.5%; margin-left: 36px; } @media only screen and (max-width: 1068px) { .page-body-media.right { margin-right: -10%; margin-left: 24px; } } @media only screen and (max-width: 734px) { .page-body-media.right { margin-left: 0; } } .page-body-media .image-share-sheet { display: block; } .page-body-media .image-description, .page-body-media .video-description { margin-left: 0; margin-right: 0; margin-bottom: 0; } @media only screen and (max-width: 734px) { .page-body-media.left, .page-body-media.right { float: none; margin: 28px auto; } .page-body-media:first-child { margin-top: 0; } } .page-body-copy { margin-bottom: 1.4211em; } .page-body-copy:lang(ar) { margin-bottom: 1.57895em; } .page-body-copy:lang(ja) { margin-bottom: 1.47376em; } .page-body-copy:lang(th) { margin-bottom: 1.36844em; } .page-body-copy:lang(ko) { margin-bottom: 1.52632em; } .page-body-copy:first-child { margin-top: 0; } .page-body-copy:last-child { margin-bottom: 0; } .component-content { margin-left: auto; margin-right: auto; width: 653px; } @media only screen and (max-width: 1068px) { .component-content { width: 576px; } } @media only screen and (max-width: 734px) { .component-content { width: 87.5%; } } .image-big .component-content { width: 980px; } @media only screen and (max-width: 1068px) { .image-big .component-content { width: 692px; } } @media only screen and (max-width: 734px) { .image-big .component-content { width: 100%; } } .image-inline .component-content { width: 653px; } @media only screen and (max-width: 1068px) { .image-inline .component-content { width: 576px; } } @media only screen and (max-width: 734px) { .image-inline .component-content { width: 87.5%; } } @media only screen and (max-width: 734px) { .gallery, .image, .video { width: 100%; } .gallery:not(.body-copy-wide) .component-content, .image:not(.image-full-bleed) .component-content { width: 320px; } } .image-share-sheet { display: table; border-radius: 10px; overflow: hidden; z-index: 0; position: relative; } @media only screen and (max-width: 734px) { .image-share-sheet { display: block; } } @media only screen and (max-width: 734px) { .image.image-full-bleed .image-share-sheet { border-radius: 0; } } @media only screen and (min-width: 416px) and (max-width: 734px) { .image.image-full-bleed .image-share-sheet { border-radius: 10px; } } @media only screen and (max-width: 415px) { .image .image-share-sheet { border-radius: 0; } } .component.not-rounded .image-share-sheet { border-radius: 0 !important; } .image-description { position: relative; display: flex; align-items: flex-start; justify-content: space-between; color: #6e6e73; margin: 16px 16px 0; font-size: 12px; line-height: 1.33337; font-weight: 600; letter-spacing: -0.01em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .theme-dark .image-description { color: #86868b; } .image-description:lang(ar) { line-height: 1.66667; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description:lang(ja) { line-height: 1.41667; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description:lang(ko) { line-height: 1.41667; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description:lang(zh) { letter-spacing: 0em; } .image-description:lang(th) { line-height: 1.33337; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .image-description { margin-top: 12px; } } .image-description:empty { margin-bottom: 0; } .image-description .icon { font-size: 19px; line-height: 1.4211; font-weight: 400; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(ar) { line-height: 1.57895; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(ja) { line-height: 1.47376; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(ko) { line-height: 1.52632; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .image-description .icon { font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(ar) { line-height: 1.58824; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(ja) { letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(ko) { line-height: 1.58824; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh) { letter-spacing: 0em; } .image-description .icon:lang(th) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .image-description .icon:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .image-description .icon::before, .image-description .icon::after { line-height: inherit; } .body-copy-wide .image-description { margin-left: 0; margin-right: 0; } .image-description .image-caption { flex-grow: 1; } .body-copy-wide .image-description { margin-right: 0; margin-left: 0; } .image-keyline .image-asset, .image-keyline .picture-image { box-sizing: border-box; border: 1px solid #d2d2d7; } .image.image-big { min-width: 320px; } .image.image-full-bleed .image-share-sheet, .image.image-inline.body-copy-wide .image-share-sheet, .image.image-grid.body-copy-wide .image-share-sheet { display: block; } .image.body-copy-wide.image-full-bleed .image-description { width: 653px; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 1068px) { .image.body-copy-wide.image-full-bleed .image-description { width: 576px; } } @media only screen and (max-width: 734px) { .image.body-copy-wide.image-full-bleed .image-description { width: 87.5%; } } @media only screen and (max-width: 734px) { .image.body-copy-wide.image-inline .component-content { width: 100%; } } .no-touch .image:hover { position: relative; z-index: 1; } @media only screen and (max-width: 734px) { .image-inline .image-description { margin-left: auto; margin-right: auto; width: 87.5%; } } .image.image-wide { width: 100%; } .image.image-wide .component-content { width: 100%; max-width: 2560px; } .image.image-wide .image-asset { width: 100%; height: 100%; } .image.image-wide .image-share-sheet, .image.image-wide .pullquote-cover { width: 100%; border-radius: 0; } @media only screen and (min-width: 1441px) { .image.image-wide .image-share-sheet, .image.image-wide .pullquote-cover { max-width: 1920px; margin: 0 auto; } } @media only screen and (min-width: 1922px) { .image.image-wide .image-share-sheet, .image.image-wide .pullquote-cover { border-radius: 10px; overflow: hidden; z-index: 0; position: relative; } } @media only screen and (min-width: 1441px) { .image.image-wide .picture-image { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.01); } } .image-grid { position: relative; z-index: 1; } .image-grid::before, .image-grid::after { content: " "; display: table; } .image-grid::after { clear: both; } .image-grid-item { box-sizing: border-box; flex: 0 0 283px; margin-bottom: 44px; } @media only screen and (max-width: 1068px) { .image-grid-item { margin-bottom: 36px; } } @media only screen and (max-width: 734px) { .image-grid-item { flex: 0 0 100%; margin-bottom: 32px; } } .image-grid-item:nth-child(odd) { margin-right: 5px; } @media only screen and (max-width: 734px) { .image-grid-item:nth-child(odd) { margin-right: 0; } } @media only screen and (max-width: 734px) { .image-grid .row:last-of-type .image-grid-item:not(:last-of-type) { margin-bottom: 32px; } } .image-grid .row:last-of-type .image-grid-item { margin-bottom: 0; } .image-grid .row { width: 100%; position: relative; display: flex; flex-direction: row; } @media only screen and (max-width: 734px) { .image-grid .row { display: block; } } .touch .image-grid.body-copy-wide .component-content { width: component-content-width; } @media only screen and (max-width: 734px) { .touch .image-grid.body-copy-wide .component-content { width: 87.5%; } } @media only screen and (max-width: 734px) { .no-touch .image-grid.body-copy-wide .component-content { width: component-content-width; } } @media only screen and (max-width: 734px) and (max-width: 734px) { .no-touch .image-grid.body-copy-wide .component-content { width: 87.5%; } } .datelocation { position: relative; z-index: 1; } .datelocation::before, .datelocation::after { content: " "; display: table; } .datelocation::after { clear: both; } .datelocation-copy { font-size: 19px; line-height: 1.4211; font-weight: 400; letter-spacing: 0.012em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; margin: 0; } .datelocation-copy:lang(ar) { line-height: 1.57895; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(ja) { line-height: 1.47376; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(ko) { line-height: 1.52632; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(th) { line-height: 1.36844; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .datelocation-copy { font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(ar) { line-height: 1.58824; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(ja) { letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(ko) { line-height: 1.58824; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh) { letter-spacing: 0em; } .datelocation-copy:lang(th) { line-height: 1.35296; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .datelocation-copy:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .modal-gallery-trigger { border: 0; background: transparent; cursor: pointer; position: relative; display: block; width: 100%; } .modal-gallery-trigger::after { content: ""; opacity: 0; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid rgba(0, 125, 250, 0.6); } .modal-gallery-trigger[data-focus-method="key"]::after { opacity: 1; } .picture-image { display: inline-block; width: 100%; height: auto; } .picture { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin-left: auto; margin-right: auto; } .picture.no-dl { pointer-events: none; } .icon.icon-arrowdown::before, .icon.icon-arrowdown::after { font-family: "social-media-font" !important; content: ""; } .theme-dark { background-color: #000; color: #f5f5f7; --footer-background: #121214; --footer-border-color: #424245; --footer-text-color: #86868b; --footer-link-color: #d2d2d7; --footer-pipe-color: #6e6e73; --footer-directory-title-color: #f5f5f7; --footer-directory-title-color-hover: #fff; } .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: #f5f5f7; } .theme-dark a, .theme-dark .link { color: #f5f5f7; } .theme-dark .footnote a { color: inherit; } .theme-dark .footnote a:hover { color: #2997ff; } .theme-dark a.block { color: inherit; } .theme-dark a.block .block-link { color: #2997ff; } .theme-dark .dotnav .dotnav-item { background-color: rgba(134, 134, 139, 0.4); } .theme-dark .dotnav .dotnav-item:hover { background-color: rgba(134, 134, 139, 0.6); } .theme-dark .dotnav .dotnav-item.current { background-color: #86868b; } .theme-dark .paddlenav .paddlenav-arrow { background-color: rgba(0, 0, 0, 0); color: rgba(134, 134, 139, 0.8); } .theme-dark .paddlenav .paddlenav-arrow:hover { background-color: rgba(0, 0, 0, 0); color: #86868b; } .theme-dark .paddlenav .paddlenav-arrow:active { background-color: rgba(0, 0, 0, 0); color: #86868b; } .theme-dark .paddlenav .paddlenav-arrow:focus[data-focus-method="mouse"]:not(input):not( textarea ):not(select):hover, .theme-dark .paddlenav .paddlenav-arrow:focus[data-focus-method="touch"]:not(input):not( textarea ):not(select):hover { background-color: rgba(0, 0, 0, 0); color: #86868b; } .theme-dark .paddlenav .paddlenav-arrow:focus[data-focus-method="mouse"]:not(input):not( textarea ):not(select):active, .theme-dark .paddlenav .paddlenav-arrow:focus[data-focus-method="touch"]:not(input):not( textarea ):not(select):active { background-color: rgba(0, 0, 0, 0); color: #86868b; } .theme-dark .paddlenav-framed .paddlenav-arrow { background-color: rgba(210, 210, 215, 0.2); color: rgba(134, 134, 139, 0.8); } .theme-dark .paddlenav-framed .paddlenav-arrow:hover { background-color: rgba(210, 210, 215, 0.28); color: #86868b; } .theme-dark .paddlenav-framed .paddlenav-arrow:active { background-color: rgba(210, 210, 215, 0.36); color: #86868b; } .theme-dark .paddlenav-framed .paddlenav-arrow:focus[data-focus-method="mouse"]:not(input):not( textarea ):not(select):hover, .theme-dark .paddlenav-framed .paddlenav-arrow:focus[data-focus-method="touch"]:not(input):not( textarea ):not(select):hover { background-color: rgba(210, 210, 215, 0.28); color: #86868b; } .theme-dark .paddlenav-framed .paddlenav-arrow:focus[data-focus-method="mouse"]:not(input):not( textarea ):not(select):active, .theme-dark .paddlenav-framed .paddlenav-arrow:focus[data-focus-method="touch"]:not(input):not( textarea ):not(select):active { background-color: rgba(210, 210, 215, 0.36); color: #86868b; } .theme-dark .quote .quote-copy { color: #f5f5f7; } .theme-dark .quote .quote-credit, .theme-dark .quote .quote-subcredit { color: #f5f5f7; } .theme-dark .sosumi { color: #6e6e73; } .theme-dark .sosumi a { color: #a1a1a6; } .theme-dark .violator { background: rgba(0, 0, 0, 0); border-color: #f56300; color: #f56300; } .theme-dark .violator-frameless { background: rgba(0, 0, 0, 0); border-color: #f56300; color: #f56300; } .theme-dark .violator-secondary { background: rgba(0, 0, 0, 0); border-color: #86868b; color: #86868b; } .tertiary-nav { margin: 36px auto 50px; } .tertiary-nav .component-content { border-top: 1px solid #d2d2d7; } .theme-dark .tertiary-nav .component-content { border-top-color: #424245; } .theme-dark header { background-color: rgba(29, 29, 31, 0.7); } .page-body-header { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; margin-bottom: 16px; margin-top: 52px; } .page-body-header:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .page-body-header { font-size: 21px; line-height: 1.19048; font-weight: 700; letter-spacing: 0.011em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(ja) { line-height: 1.2381; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(ko) { line-height: 1.2858; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(th) { line-height: 1.381; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(ar) { line-height: 1.4286; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 1068px) { .page-body-header { margin-top: 48px; } } @media only screen and (max-width: 734px) { .page-body-header { margin-top: 44px; } } .page-body-header--secondary { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: 0em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; margin-top: 52px; margin-bottom: 24px; } .page-body-header--secondary:lang(ar) { line-height: 1.3; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ja) { line-height: 1.175; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ko) { line-height: 1.2; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(th) { line-height: 1.35; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .page-body-header--secondary { font-size: 32px; line-height: 1.125; font-weight: 700; letter-spacing: 0.004em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ar) { line-height: 1.34375; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ja) { line-height: 1.21875; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ko) { line-height: 1.21875; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 734px) { .page-body-header--secondary { font-size: 28px; line-height: 1.14286; font-weight: 700; letter-spacing: 0.007em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ko) { line-height: 1.25; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(th) { line-height: 1.39286; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ar) { font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(ja) { font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-body-header--secondary:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 1068px) { .page-body-header--secondary { margin-top: 48px; margin-bottom: 20px; } } @media only screen and (max-width: 734px) { .page-body-header--secondary { margin-top: 44px; } } .page-body-header:first-child { margin-top: 8px; } @media only screen and (max-width: 1068px) { .page-body-header:first-child { margin-top: 12px; } } @media only screen and (max-width: 734px) { .page-body-header:first-child { margin-top: 12px; } } .page-body-header:last-child { margin-bottom: 0; } .category-eyebrow { font-size: 12px; line-height: 1.33337; font-weight: 700; letter-spacing: -0.01em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(ar) { line-height: 1.66667; letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(ja) { line-height: 1.41667; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(ko) { line-height: 1.41667; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(zh) { letter-spacing: 0em; } .category-eyebrow:lang(th) { line-height: 1.33337; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__category, .category-eyebrow__date { display: block; } @media only screen and (max-width: 1068px) { .category-eyebrow__category, .category-eyebrow__date { margin-right: -7px; } } @media only screen and (max-width: 734px) { .category-eyebrow__category, .category-eyebrow__date { margin-right: 0; } } .category-eyebrow__category::after, .category-eyebrow__category::before, .category-eyebrow__date::after, .category-eyebrow__date::before { alt: ""; } .category-eyebrow__category { text-transform: uppercase; color: #6e6e73; border-color: #6e6e73; } .theme-dark .category-eyebrow__category { color: #86868b; border-color: #86868b; } @media only screen and (max-width: 1068px) { .landingtile-featured .category-eyebrow__category { font-size: 12px; line-height: 1.33337; font-weight: 400; letter-spacing: -0.01em; font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; border-radius: 12px; padding-left: 11px; padding-right: 11px; padding-top: 3px; padding-bottom: 3px; } .landingtile-featured .category-eyebrow__category:lang(ar) { letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .landingtile-featured .category-eyebrow__category:lang(ja) { letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .landingtile-featured .category-eyebrow__category:lang(ko) { letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .landingtile-featured .category-eyebrow__category:lang(zh) { letter-spacing: 0em; } .landingtile-featured .category-eyebrow__category:lang(th) { font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .landingtile-featured .category-eyebrow__category:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .landingtile-featured .category-eyebrow__category:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .landingtile-featured .category-eyebrow__category:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .landingtile-featured .category-eyebrow__category:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } .category-eyebrow__date { font-size: 14px; line-height: 1.28577; font-weight: 600; letter-spacing: -0.016em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(ar) { letter-spacing: 0em; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(ja) { line-height: 1.35718; letter-spacing: 0em; font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(ko) { line-height: 1.42859; letter-spacing: 0em; font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(zh) { letter-spacing: 0em; } .category-eyebrow__date:lang(th) { line-height: 1.35718; letter-spacing: 0em; font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .category-eyebrow__date:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .page-article .category-eyebrow__date { margin-top: 4px; } .category.component { margin-top: 0; margin-bottom: 20px; } .article-subhead { font-size: 24px; line-height: 1.16667; font-weight: 500; letter-spacing: 0.009em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; margin-top: 20px; margin-bottom: 0; } .article-subhead:lang(ar) { line-height: 1.33341; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(ja) { line-height: 1.25; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(ko) { line-height: 1.29167; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(th) { line-height: 1.375; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } @media only screen and (max-width: 1068px) { .article-subhead { font-size: 21px; line-height: 1.19048; font-weight: 500; letter-spacing: 0.011em; font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(ja) { line-height: 1.2381; font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "MS Pゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(ko) { line-height: 1.2858; font-family: "SF Pro KR", "SF Pro Display", "SF Pro Icons", "Apple Gothic", "HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(th) { line-height: 1.381; font-family: "SF Pro TH", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(ar) { line-height: 1.4286; font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-CN) { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-HK) { font-family: "SF Pro HK", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-MO) { font-family: "SF Pro HK", "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } .article-subhead:lang(zh-TW) { font-family: "SF Pro TC", "SF Pro Display", "SF Pro Icons", "PingFang TC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; } } @media only screen and (max-width: 1068px) { .article-subhead { margin-top: 16px; } } .article-subhead + .share-sheet { margin-top: 24px; } @media only screen and (max-width: 1068px) { .article-subhead + .share-sheet { margin-top: 20px; } } .article-subhead + .tags-sheet { margin-top: 24px; margin-bottom: 3px; } @media only screen and (max-width: 1068px) { .article-subhead + .tags-sheet { margin-top: 20px; margin-bottom: 3px; } } .article-header, .featured-header { padding: 16px 0px 0px 0px; } .footer-main { margin: 0 auto; width: 100%; border-top: 1px solid rgb(224 226 217 / 1); } .footer-wrapper { padding: 20px; margin: 0 auto; } .footer-box { margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .footer-main .foot-nav { color: var(--gray-text); width: 100%; } .footer-main .item .logo { /* font-size: 16px; */ font-weight: 600; color: var(--black); } .footer-main .foot-nav-items { /* display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; */ } @media screen and (min-width: 320px) { .footer-main .foot-nav-items { flex-direction: column; } } @media screen and (min-width: 768px) { .footer-main .foot-nav-items { flex-direction: row; } } @media screen and (min-width: 955px) { .footer-main .foot-nav-items { flex-direction: row; } } .footer-main { margin: 0 auto; width: 100%; background-color: var(--footer-background); border: none; } .theme-dark .footer-main { background-color: var(--footer-background); } .footer-wrapper { padding: 20px; margin: 0 auto; } .footer-box { margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .footer-main .foot-nav { color: var(--footer-text-color); width: 100%; } .footer-main .item .logo { font-size: 16px; font-weight: 600; color: var(--footer-directory-title-color); } .footer-main .foot-nav-items { /* display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; */ } @media screen and (min-width: 320px) { .footer-main .foot-nav-items { flex-direction: column; } } @media screen and (min-width: 768px) { .footer-main .foot-nav-items { flex-direction: row; } } @media screen and (min-width: 955px) { .footer-main .foot-nav-items { flex-direction: row; } } .foot-nav-items .item { display: flex; flex-direction: column; } .footer-main .item div, .footer-main .item a { padding: 4px 0px; font-size: 14px; color: var(--footer-pipe-color); } .footer-main .item a:hover { color: var(--footer-directory-title-color-hover); } .footer-main .foot-nav-items .item-title { color: var(--footer-directory-title-color); /* font-size: 14px; */ font-weight: 600; } .footer-main .copyright { color: var(--footer-pipe-color); padding-top: 20px; margin-top: 20px; font-size: 14px; } .page-article table { overflow: auto; display: block; border-spacing: 0; border-collapse: collapse; margin-top: 1rem; margin-bottom: 1rem; } .page-article table tr th, .page-article table tr td { padding: 0.5rem 1rem; border: 1px solid #e9ecef; } .page-article table tr:nth-child(2n) { background: #f8f9fa; } .code pre { overflow-x: auto; border-radius: 8px; } .theme-dark table th, .theme-dark table td { color: #eee !important; } .theme-dark table th { background: #000000 !important; } .theme-dark table tr:nth-child(2n) { background: #000000; } .tag { cursor: pointer; display: inline-block; text-align: center; white-space: nowrap; font-size: 12px; line-height: 1.33337; font-weight: 400; letter-spacing: -0.01em; min-width: 23px; padding-left: 11px; padding-right: 11px; padding-top: 4px; padding-bottom: 4px; border-radius: 12px; background: #0071e3; color: #fff; margin-right: 12px; } .tag:hover { text-decoration: none; background: #0077ed; } .article-copyright { background-color: #f5f5f7; border-radius: 10px; display: flex; flex-direction: column; margin: 0; padding: 10px 0px; font-size: 14px; } .theme-dark .article-copyright { background-color: #1d1d1f; } .article-copyright .content { margin: 0 32px; padding-bottom: 8px; padding-top: 8px; } @media only screen and (max-width: 734px) { .article-copyright .contentm { margin: 0 16px; } } @media only screen and (max-width: 1068px) { .article-copyright .content { margin: 0 16px; } } section.archive { min-height: 78vh; background-color: #f2f2f2; margin-top: 0; } .section-tag { padding: 24px 0px; } .tag-header { font-size: 24px; line-height: 1.16667; font-weight: 700; letter-spacing: 0.009em; } .archive-tag { background: white; padding: 1em 1em; border-radius: 8px; margin: 10px 0px; } a.tag_post-content { color: #1d1d1f; letter-spacing: 0.011em; font-size: 17px; } .tag-post-list li { padding: 0.3em 0; margin: 0px 1em; } span.tag-date { margin-right: 5px; } @media only screen and (max-width: 1068px) { .tag-header { font-size: 21px; } a.tag_post-content { font-size: 14px; } } @media only screen and (max-width: 734px) { .tag-header { font-size: 18px; } .tag-post-list li { margin: 0px 0em; } }