@import '/media/plg_system_jtaldef/index/css/022f69a0f68b618eb85c6ad1e5277509.css?69f8305bf13c7132aa2e25a9b86ed53d';
  .raxo-prime { container: raxo-prime / inline-size; margin-block: 2rem; box-sizing: border-box; min-width: 192px; overflow: hidden; &:first-child { margin-block-start: 0; } & *, & ::before, & ::after { box-sizing: inherit; } & article, & h3, & h4, & img, & a { margin: 0; padding: 0; background: transparent none; border: 0 none; } & a { appearance: none; outline: 0; text-decoration: none; transition: all .25s ease-in-out; &:hover { opacity: .8; } } } .raxo-prime { --raxo-grid-top-min: 320px; /* Minimum column width for top items */ --raxo-grid-nor-min: 220px; /* Minimum column width for normal items */ --raxo-grid-gap: 4px; /* Gap between articles in the grid */ --raxo-font-main: 'Roboto', Arial, sans-serif; --raxo-size-px: clamp(20px, 4cqi, 48px); --raxo-size-top-title: 24px; --raxo-size-nor-title: 18px; --raxo-size-top-text: 16px; --raxo-size-nor-text: 14px; & :is(.raxo-block-name, .raxo-block-button) { position: relative; margin-bottom: 20px; padding: 10px var(--raxo-size-px) 8px; font: normal 18px/22px var(--raxo-font-main); color: var(--raxo-color-text-deep); background-color: var(--raxo-color-theme); & a { color: inherit; } & a::before { content: ""; position: absolute; inset: 0; } } & .raxo-block-intro { margin-bottom: 20px; padding-inline: var(--raxo-size-px); font-size: 16px; line-height: 22px; } & .raxo-block-button { margin: 20px auto 0; font-size: 16px; text-align: center; } & .raxo-body { --raxo-grid-prop: 1fr; &:has(.raxo-top + .raxo-normal) { display: grid; gap: var(--raxo-grid-gap); grid-template-columns: var(--raxo-grid-prop); } } & :is(.raxo-top, .raxo-normal) { --raxo-grid-cols: 1; --raxo-grid-gap-sum: calc((var(--raxo-grid-cols) - 1) * var(--raxo-grid-gap)); --raxo-grid-col-max: calc((100% - var(--raxo-grid-gap-sum)) / var(--raxo-grid-cols)); display: grid; gap: var(--raxo-grid-gap); grid-template-columns: repeat(auto-fill, minmax(max(var(--raxo-grid-col-min), var(--raxo-grid-col-max)), 1fr)); overflow: hidden; } & .raxo-top { --raxo-grid-col-min: var(--raxo-grid-top-min); } & .raxo-normal { --raxo-grid-col-min: var(--raxo-grid-nor-min); } & article { display: grid; container: raxo-prime-item / inline-size; --raxo-size-px: clamp(20px, 4.8cqi, 64px); --raxo-size-py: clamp(14px, 3.4cqi, 40px); position: relative; min-height: 192px; font-size: var(--raxo-size-text); background-color: var(--raxo-gray-200); overflow: hidden; & > div { grid-area: 1 / -1; } & :is(.raxo-content, .raxo-link) { position: absolute; inset: 0; z-index: 2; } & .raxo-content { display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: flex-start; padding: calc(var(--raxo-size-py) * 1.5) var(--raxo-size-px) var(--raxo-size-py); overflow: hidden; } .raxo-top & { --raxo-size-text: var(--raxo-size-top-text); & .raxo-content { gap: 10px; } } .raxo-normal & { --raxo-size-text: var(--raxo-size-nor-text); & .raxo-content { gap: 8px; } } & .raxo-link { opacity: 0; } &:hover { & .raxo-title::after { width: 60%; } & .raxo-image { filter: saturate(1.25) brightness(0.8); } } } & .raxo-image { position: relative; transition: filter .3s ease-out; z-index: 1; & img { width: 100%; height: 100%; object-fit: cover; image-rendering: -webkit-optimize-contrast; } &::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-blend-mode: multiply; background-image: linear-gradient(to bottom, oklch(0 0 0 / 0) 0%, oklch(0 0 0 / 0) 24%, oklch(0 0 0 / 0.03) 36%, oklch(0 0 0 / 0.10) 47%, oklch(0 0 0 / 0.22) 57%, oklch(0 0 0 / 0.40) 68%, oklch(0 0 0 / 0.58) 80%, oklch(0 0 0 / 0.72) 100% ); } } & .raxo-title { margin-top: 2px; order: 3; font-family: var(--raxo-font-main); font-weight: bold; line-height: 1.15; color: var(--raxo-color-text-deep); text-shadow: 0 1px hsla(232, 5%, 22%, .6); .raxo-top & { font-size: var(--raxo-size-top-title); } .raxo-normal & { font-size: var(--raxo-size-nor-title); } & span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } &::after { content: ""; display: block; position: relative; bottom: 0; width: 0; height: 2px; background-color: var(--raxo-color-theme); transition: width .3s ease-in-out; .raxo-top & { height: 3px; } } } & .raxo-text { --raxo-line-limit: 4; order: 4; line-height: 1.35; color: var(--raxo-color-text-base); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--raxo-line-limit); line-clamp: var(--raxo-line-limit); overflow: hidden; .raxo-normal :where(&) { margin-top: -8px; max-height: 0; opacity: 0; transition: margin .1s ease-out .3s, opacity .4s ease-out, max-height .4s ease-out; } .raxo-item-nor:hover & { margin-top: 0; max-height: calc(var(--raxo-size-text) * 1.35 * var(--raxo-line-limit)); opacity: 1; transition-delay: 0s, .1s, .1s; } } & .raxo-meta { display: flex; flex-wrap: wrap; order: 2; margin-inline-start: calc(-1 * var(--raxo-size-px)); padding-inline: var(--raxo-size-px) var(--raxo-size-text); line-height: 1.25; color: var(--raxo-color-text-base); background: hsla(232, 6%, 17%, .5); backdrop-filter: blur(2px); .raxo-top :where(&) { padding-block: 4px; } .raxo-normal :where(&) { padding-block: 3px; } & :is(.raxo-hits, .raxo-rating, .raxo-comments) { padding-left: 28px; background-repeat: no-repeat; background-position: 0 50%; background-size: calc(var(--raxo-size-text) * 1.375); } & .raxo-hits { background-image: url("/modules/mod_raxo_content_spotlight/tmpl/raxo-prime/ico-hits.svg"); } & .raxo-rating { background-image: url("/modules/mod_raxo_content_spotlight/tmpl/raxo-prime/ico-rating.svg"); } & .raxo-comments { background-image: url("/modules/mod_raxo_content_spotlight/tmpl/raxo-prime/ico-comments.svg"); } & > :not(:last-child)::after { content: "|"; display: inline-block; margin: 0 14px; color: var(--raxo-gray-400); } } & .raxo-category { position: relative; order: 1; margin: 0 0 auto calc(-1 * var(--raxo-size-px)); padding-inline: var(--raxo-size-px) var(--raxo-size-text); font: bold calc(var(--raxo-size-text) - 2px) / 1.5 var(--raxo-font-main); color: var(--raxo-color-text-deep); background-color: var(--raxo-color-theme); z-index: 3; .raxo-top :where(&) { padding-block: 3px; } .raxo-normal :where(&) { padding-block: 2px; } & a { color: inherit; } & a::before { content: ""; position: absolute; inset: 0; } } } @container raxo-prime (width < 256px) { .raxo-prime :is(.raxo-text, .raxo-meta) { display: none; } } @container raxo-prime (width < 448px) { .raxo-prime { & :is(.raxo-top, .raxo-normal) { grid-template-columns: 1fr; } & .raxo-top { --raxo-size-top-title: 21px; --raxo-size-top-text: 15px; & .raxo-text { display: none; } } } } @container raxo-prime (width >= 448px) { .raxo-prime { & .raxo-body { --raxo-grid-prop: 1fr; } & .raxo-top { --raxo-grid-cols: 1; } & .raxo-normal { --raxo-grid-cols: 2; } &.prime-sm-1 .raxo-body { --raxo-grid-prop: 1fr; } &.prime-sm-1-1 .raxo-body { --raxo-grid-prop: 1fr 1fr; } &.prime-sm-1-2 .raxo-body { --raxo-grid-prop: 1fr 2fr; } &.prime-sm-2-1 .raxo-body { --raxo-grid-prop: 2fr 1fr; } &.top-sm-col1 .raxo-top { --raxo-grid-cols: 1; } &.top-sm-col2 .raxo-top { --raxo-grid-cols: 2; } &.nor-sm-col1 .raxo-normal { --raxo-grid-cols: 1; } &.nor-sm-col2 .raxo-normal { --raxo-grid-cols: 2; } &.nor-sm-col3 .raxo-normal { --raxo-grid-cols: 3; } } } @container raxo-prime (width >= 696px) { .raxo-prime { & .raxo-body { --raxo-grid-prop: 2fr 1fr; } & .raxo-top { --raxo-grid-cols: 1; } & .raxo-normal { --raxo-grid-cols: 2; } &.prime-md-1 .raxo-body { --raxo-grid-prop: 1fr; } &.prime-md-1-1 .raxo-body { --raxo-grid-prop: 1fr 1fr; } &.prime-md-1-2 .raxo-body { --raxo-grid-prop: 1fr 2fr; } &.prime-md-2-1 .raxo-body { --raxo-grid-prop: 2fr 1fr; } &.prime-md-1-3 .raxo-body { --raxo-grid-prop: 1fr 3fr; } &.prime-md-3-1 .raxo-body { --raxo-grid-prop: 3fr 1fr; } &.top-md-col1 .raxo-top { --raxo-grid-cols: 1; } &.top-md-col2 .raxo-top { --raxo-grid-cols: 2; } &.top-md-col3 .raxo-top { --raxo-grid-cols: 3; } &.nor-md-col1 .raxo-normal { --raxo-grid-cols: 1; } &.nor-md-col2 .raxo-normal { --raxo-grid-cols: 2; } &.nor-md-col3 .raxo-normal { --raxo-grid-cols: 3; } &.nor-md-col4 .raxo-normal { --raxo-grid-cols: 4; } & .raxo-block-button { min-width: 320px; width: fit-content; } } } @container raxo-prime (width >= 944px) { .raxo-prime { & .raxo-body { --raxo-grid-prop: 3fr 2fr; } & .raxo-top { --raxo-grid-cols: 1; } & .raxo-normal { --raxo-grid-cols: 2; } &.prime-lg-1 .raxo-body { --raxo-grid-prop: 1fr; } &.prime-lg-1-1 .raxo-body { --raxo-grid-prop: 1fr 1fr; } &.prime-lg-1-2 .raxo-body { --raxo-grid-prop: 1fr 2fr; } &.prime-lg-2-1 .raxo-body { --raxo-grid-prop: 2fr 1fr; } &.prime-lg-1-3 .raxo-body { --raxo-grid-prop: 1fr 3fr; } &.prime-lg-3-1 .raxo-body { --raxo-grid-prop: 3fr 1fr; } &.prime-lg-1-4 .raxo-body { --raxo-grid-prop: 1fr 4fr; } &.prime-lg-2-3 .raxo-body { --raxo-grid-prop: 2fr 3fr; } &.prime-lg-3-2 .raxo-body { --raxo-grid-prop: 3fr 2fr; } &.prime-lg-4-1 .raxo-body { --raxo-grid-prop: 4fr 1fr; } &.top-lg-col1 .raxo-top { --raxo-grid-cols: 1; } &.top-lg-col2 .raxo-top { --raxo-grid-cols: 2; } &.top-lg-col3 .raxo-top { --raxo-grid-cols: 3; } &.top-lg-col4 .raxo-top { --raxo-grid-cols: 4; } &.nor-lg-col1 .raxo-normal { --raxo-grid-cols: 1; } &.nor-lg-col2 .raxo-normal { --raxo-grid-cols: 2; } &.nor-lg-col3 .raxo-normal { --raxo-grid-cols: 3; } &.nor-lg-col4 .raxo-normal { --raxo-grid-cols: 4; } &.nor-lg-col5 .raxo-normal { --raxo-grid-cols: 5; } & .raxo-top { --raxo-size-top-title: 30px; } } } @container raxo-prime (width >= 1192px) { .raxo-prime { & .raxo-body { --raxo-grid-prop: 1fr 1fr; } & .raxo-top { --raxo-grid-cols: 1; } & .raxo-normal { --raxo-grid-cols: 2; } &.prime-xl-1 .raxo-body { --raxo-grid-prop: 1fr; } &.prime-xl-1-1 .raxo-body { --raxo-grid-prop: 1fr 1fr; } &.prime-xl-1-2 .raxo-body { --raxo-grid-prop: 1fr 2fr; } &.prime-xl-2-1 .raxo-body { --raxo-grid-prop: 2fr 1fr; } &.prime-xl-1-3 .raxo-body { --raxo-grid-prop: 1fr 3fr; } &.prime-xl-3-1 .raxo-body { --raxo-grid-prop: 3fr 1fr; } &.prime-xl-1-4 .raxo-body { --raxo-grid-prop: 1fr 4fr; } &.prime-xl-2-3 .raxo-body { --raxo-grid-prop: 2fr 3fr; } &.prime-xl-3-2 .raxo-body { --raxo-grid-prop: 3fr 2fr; } &.prime-xl-4-1 .raxo-body { --raxo-grid-prop: 4fr 1fr; } &.prime-xl-1-5 .raxo-body { --raxo-grid-prop: 1fr 5fr; } &.prime-xl-5-1 .raxo-body { --raxo-grid-prop: 5fr 1fr; } &.top-xl-col1 .raxo-top { --raxo-grid-cols: 1; } &.top-xl-col2 .raxo-top { --raxo-grid-cols: 2; } &.top-xl-col3 .raxo-top { --raxo-grid-cols: 3; } &.top-xl-col4 .raxo-top { --raxo-grid-cols: 4; } &.top-xl-col5 .raxo-top { --raxo-grid-cols: 5; } &.nor-xl-col1 .raxo-normal { --raxo-grid-cols: 1; } &.nor-xl-col2 .raxo-normal { --raxo-grid-cols: 2; } &.nor-xl-col3 .raxo-normal { --raxo-grid-cols: 3; } &.nor-xl-col4 .raxo-normal { --raxo-grid-cols: 4; } &.nor-xl-col5 .raxo-normal { --raxo-grid-cols: 5; } &.nor-xl-col6 .raxo-normal { --raxo-grid-cols: 6; } } } @container raxo-prime (width >= 1440px) { .raxo-prime { & .raxo-body { --raxo-grid-prop: 1fr; } & .raxo-top { --raxo-grid-cols: 2; } & .raxo-normal { --raxo-grid-cols: 4; } &.prime-2xl-1 .raxo-body { --raxo-grid-prop: 1fr; } &.prime-2xl-1-1 .raxo-body { --raxo-grid-prop: 1fr 1fr; } &.prime-2xl-1-2 .raxo-body { --raxo-grid-prop: 1fr 2fr; } &.prime-2xl-2-1 .raxo-body { --raxo-grid-prop: 2fr 1fr; } &.prime-2xl-1-3 .raxo-body { --raxo-grid-prop: 1fr 3fr; } &.prime-2xl-3-1 .raxo-body { --raxo-grid-prop: 3fr 1fr; } &.prime-2xl-1-4 .raxo-body { --raxo-grid-prop: 1fr 4fr; } &.prime-2xl-2-3 .raxo-body { --raxo-grid-prop: 2fr 3fr; } &.prime-2xl-3-2 .raxo-body { --raxo-grid-prop: 3fr 2fr; } &.prime-2xl-4-1 .raxo-body { --raxo-grid-prop: 4fr 1fr; } &.prime-2xl-1-5 .raxo-body { --raxo-grid-prop: 1fr 5fr; } &.prime-2xl-5-1 .raxo-body { --raxo-grid-prop: 5fr 1fr; } &.top-2xl-col1 .raxo-top { --raxo-grid-cols: 1; } &.top-2xl-col2 .raxo-top { --raxo-grid-cols: 2; } &.top-2xl-col3 .raxo-top { --raxo-grid-cols: 3; } &.top-2xl-col4 .raxo-top { --raxo-grid-cols: 4; } &.top-2xl-col5 .raxo-top { --raxo-grid-cols: 5; } &.top-2xl-col6 .raxo-top { --raxo-grid-cols: 6; } &.nor-2xl-col1 .raxo-normal { --raxo-grid-cols: 1; } &.nor-2xl-col2 .raxo-normal { --raxo-grid-cols: 2; } &.nor-2xl-col3 .raxo-normal { --raxo-grid-cols: 3; } &.nor-2xl-col4 .raxo-normal { --raxo-grid-cols: 4; } &.nor-2xl-col5 .raxo-normal { --raxo-grid-cols: 5; } &.nor-2xl-col6 .raxo-normal { --raxo-grid-cols: 6; } } } .raxo-prime { --raxo-color-base: oklch(0.48 0.19 267.8); --raxo-color-theme: var(--raxo-color-base); --raxo-gray-100: hsl(232, 1%, 98%); --raxo-gray-200: hsl(232, 2%, 88%); --raxo-gray-260: hsl(232, 3%, 82%); --raxo-gray-300: hsl(232, 3%, 69%); --raxo-gray-400: hsl(232, 4%, 45%); --raxo-gray-500: hsl(232, 5%, 30%); --raxo-gray-600: hsl(232, 5%, 22%); --raxo-gray-900: hsl(232, 7%, 6%); --raxo-color-text-deep: var(--raxo-gray-100); --raxo-color-text-base: var(--raxo-gray-260); &.dark-mode, &.mode-dark { --raxo-color-theme: oklch( from var(--raxo-color-base) calc(l * 1.1) calc(c * 0.8) h ); --raxo-gray-100: hsl(232, 8%, 5%); --raxo-gray-200: hsl(232, 6%, 16%); --raxo-gray-300: hsl(232, 5%, 29%); --raxo-gray-400: hsl(232, 3%, 51%); --raxo-gray-500: hsl(232, 2%, 66%); --raxo-gray-600: hsl(232, 2%, 73%); --raxo-gray-900: hsl(232, 1%, 87%); --raxo-color-text-deep: var(--raxo-gray-900); --raxo-color-text-base: var(--raxo-gray-600); & .raxo-image img { filter: brightness(0.87); } } &.color-red { --raxo-color-base: oklch(0.53 0.19 28.82); } &.color-pink { --raxo-color-base: oklch(0.58 0.19 354.7); } &.color-orange { --raxo-color-base: oklch(0.61 0.18 45.23); } &.color-yellow { --raxo-color-base: oklch(0.82 0.17 94.64); } &.color-brown { --raxo-color-base: oklch(0.44 0.05 39.62); } &.color-green { --raxo-color-base: oklch(0.54 0.17 140.3); } &.color-teal { --raxo-color-base: oklch(0.58 0.11 186.8); } &.color-blue { --raxo-color-base: oklch(0.48 0.18 259.4); } &.color-sky { --raxo-color-base: oklch(0.62 0.15 243.2); } &.color-violet { --raxo-color-base: oklch(0.48 0.19 287.4); } &.color-purple { --raxo-color-base: oklch(0.48 0.19 303.4); } &.color-gray { --raxo-color-base: oklch(0.38 0.0186 254); } & :where(.raxo-block-intro, .raxo-text) a { color: var(--raxo-color-theme); } }