/* SFF 2026 - Tile Bento. Scoped to .sff26-tiles; rules are written as
   ".sff26-tiles .sff26-tiles__x" so they outrank the theme's element rules.
   The only !important is phone typography (see the phone block). */

.sff26-tiles {
  --sff26-muted: #cfcfcf;
  --sff26-amber: #FCB316;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}

/* From tablets up the content lines up with the site header and footer: the
   forum skin's --forum-content-max and --forum-gutter (these fallbacks without it) */
@media (min-width: 768px) {
  .sff26-tiles { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-tiles *,
.sff26-tiles *::before,
.sff26-tiles *::after { box-sizing: border-box; }

/* Heading pattern: heading and lead on the left, the link on the right */
.sff26-tiles .sff26-tiles__w {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "hd acts" "bd bd";
  column-gap: 48px;
  row-gap: 56px;
  align-items: end;
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}
.sff26-tiles .sff26-tiles__hd { grid-area: hd; }
.sff26-tiles .sff26-tiles__acts { grid-area: acts; display: flex; align-items: center; }
.sff26-tiles .sff26-tiles__bd { grid-area: bd; min-width: 0; }
.sff26-tiles .sff26-tiles__h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.sff26-tiles .sff26-tiles__h2 span { color: inherit; }
.sff26-tiles .sff26-tiles__lead { max-width: 56ch; margin: 18px 0 0; padding: 0; font-size: 18px; line-height: 1.5; color: var(--sff26-muted); text-wrap: pretty; }

/* Text link: amber, the primary CTA's arrow; the underline runs under the
   text and the arrow and stretches with it (same as the other v2 modules) */
.sff26-tiles .sff26-tiles__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--forum-highlight, var(--sff26-amber));
  text-decoration: none;
}
.sff26-tiles .sff26-tiles__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(24px * -0.3);
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.sff26-tiles .sff26-tiles__link:hover,
.sff26-tiles .sff26-tiles__link:focus-visible { color: var(--forum-highlight, var(--sff26-amber)); text-decoration: none; }
.sff26-tiles .sff26-tiles__link:hover::after,
.sff26-tiles .sff26-tiles__link:focus-visible::after { transform: scaleX(1); }
.sff26-tiles .sff26-tiles__link-ic { flex: none; display: block; width: 24px; height: 12px; transform-origin: left center; transition: transform .3s ease; }
.sff26-tiles .sff26-tiles__link:hover .sff26-tiles__link-ic,
.sff26-tiles .sff26-tiles__link:focus-visible .sff26-tiles__link-ic { transform: scaleX(1.3); }
.sff26-tiles a:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }

/* The grid */
.sff26-tiles .sff26-tiles__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sff26-tiles.sff26-tiles--mixed .sff26-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; }
.sff26-tiles.sff26-tiles--mixed .sff26-tiles__tile--wide { grid-column: span 2; }
.sff26-tiles.sff26-tiles--feature .sff26-tiles__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 290px 290px; grid-auto-rows: auto; }
.sff26-tiles.sff26-tiles--feature .sff26-tiles__tile { grid-column: 1 / 13; }
.sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--1 { grid-column: 1 / 8; grid-row: 1 / 3; }
.sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--2 { grid-column: 8 / 13; grid-row: 1; }
.sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--3 { grid-column: 8 / 13; grid-row: 2; }

/* A tile */
.sff26-tiles .sff26-tiles__tile { display: flex; min-width: 0; margin: 0; list-style: none; }
.sff26-tiles .sff26-tiles__tile::before,
.sff26-tiles .sff26-tiles__tile::marker { content: none; }
.sff26-tiles .sff26-tiles__a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 26px 26px 24px;
  overflow: hidden;
  border-radius: 12px;
  background: #1b1b1b;
  color: #fff;
  text-decoration: none;
  transition: transform .35s var(--sff26-ease), box-shadow .35s var(--sff26-ease);
}
.sff26-tiles .sff26-tiles__a > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform .8s var(--sff26-ease);
}
/* A dark fade up from the bottom so the text reads on any photo */
.sff26-tiles .sff26-tiles__a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(20, 20, 20, .95) 0%, rgba(20, 20, 20, .84) 38%, rgba(20, 20, 20, .42) 64%, rgba(20, 20, 20, .12) 84%, rgba(20, 20, 20, .28) 100%);
}
.sff26-tiles.sff26-tiles--mixed .sff26-tiles__a { padding: 24px 24px 22px; }
.sff26-tiles.sff26-tiles--mixed .sff26-tiles__a::before { background: linear-gradient(0deg, rgba(20, 20, 20, .9) 0%, rgba(20, 20, 20, .45) 38%, rgba(20, 20, 20, 0) 70%); }
.sff26-tiles .sff26-tiles__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sff26-tiles .sff26-tiles__t { margin: 0; padding: 0; font-family: inherit; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: inherit; text-transform: none; text-wrap: balance; }
.sff26-tiles.sff26-tiles--mixed .sff26-tiles__t { font-size: 24px; }
.sff26-tiles.sff26-tiles--mixed .sff26-tiles__tile--wide .sff26-tiles__t { font-size: 30px; }
.sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--1 .sff26-tiles__t { font-size: 40px; letter-spacing: -.02em; }
.sff26-tiles .sff26-tiles__p { max-width: 54ch; margin: 8px 0 0; padding: 0; font-size: 15px; line-height: 1.5; font-weight: 400; color: #dcdcdc; }
.sff26-tiles.sff26-tiles--mixed .sff26-tiles__p { margin-top: 6px; line-height: 1.45; }
.sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--1 .sff26-tiles__p { font-size: 17px; }
.sff26-tiles .sff26-tiles__p--note { margin-top: 4px; font-weight: 600; color: #fff; }
.sff26-tiles .sff26-tiles__tile--link .sff26-tiles__t,
.sff26-tiles .sff26-tiles__tile--link .sff26-tiles__p { padding-right: 56px; }

/* The tag in the top corner (4px corners, not a pill) */
.sff26-tiles .sff26-tiles__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  background: rgba(20, 20, 20, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

/* The arrow in a circle (link tiles only), and the hover */
.sff26-tiles .sff26-tiles__go {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  color: inherit;
  transition: transform .35s var(--sff26-ease), background-color .3s ease, border-color .3s ease, color .3s ease;
}
.sff26-tiles .sff26-tiles__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sff26-tiles a.sff26-tiles__a:hover,
.sff26-tiles a.sff26-tiles__a:focus-visible { transform: translateY(-6px); color: #fff; text-decoration: none; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .75); }
.sff26-tiles a.sff26-tiles__a:hover > img,
.sff26-tiles a.sff26-tiles__a:focus-visible > img { transform: scale(1.06); }
.sff26-tiles a.sff26-tiles__a:hover .sff26-tiles__go,
.sff26-tiles a.sff26-tiles__a:focus-visible .sff26-tiles__go { transform: translateX(6px); border-color: var(--sff26-amber); background: var(--sff26-amber); color: #141414; }

/* A solid tile: the colour instead of a photo, dark text (white on red and blue: --sff26-on); slots beside it */
.sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__a {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  padding: 34px 36px;
  background: var(--sff26-c);
  color: var(--sff26-on, #141414);
}
.sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__a::before { display: none; }
.sff26-tiles .sff26-tiles__tile--solid a.sff26-tiles__a:hover,
.sff26-tiles .sff26-tiles__tile--solid a.sff26-tiles__a:focus-visible { color: var(--sff26-on, #141414); }
.sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__tag { position: static; margin-bottom: 16px; background: rgba(20, 20, 20, .12); color: inherit; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__p { color: inherit; }
.sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__p--note { font-weight: 400; opacity: .85; }
.sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__go { border-color: color-mix(in srgb, currentColor 40%, transparent); }
.sff26-tiles .sff26-tiles__slots { display: grid; flex: none; gap: 14px; width: min(48%, 500px); margin: 0; padding: 0; list-style: none; }
.sff26-tiles .sff26-tiles__slot {
  display: grid;
  grid-template-columns: auto 84px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font-size: 17px;
  line-height: 1.4;
  color: inherit;
  list-style: none;
}
.sff26-tiles .sff26-tiles__slot:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.sff26-tiles .sff26-tiles__slot::before,
.sff26-tiles .sff26-tiles__slot::marker { content: none; }
.sff26-tiles .sff26-tiles__stk { display: inline-block; flex: none; width: 9px; height: 20px; background: currentColor; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
.sff26-tiles .sff26-tiles__slot b { font-weight: 600; white-space: nowrap; color: inherit; }
.sff26-tiles .sff26-tiles__slot em { font-style: normal; opacity: .8; }

@media (max-width: 1199px) {
  .sff26-tiles .sff26-tiles__slot { grid-template-columns: auto 76px minmax(0, 1fr); }
}
@media (max-width: 991px) {
  .sff26-tiles { padding-top: 96px; }
  .sff26-tiles.sff26-tiles--mixed .sff26-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; }
  .sff26-tiles.sff26-tiles--mixed .sff26-tiles__tile--wide { grid-column: 1 / -1; }
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__grid { grid-template-rows: 340px 260px; }
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--1 { grid-column: 1 / -1; grid-row: 1; }
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--2 { grid-column: 1 / 7; grid-row: 2; }
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--3 { grid-column: 7 / 13; grid-row: 2; }
  .sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__a { flex-direction: column; align-items: stretch; }
  .sff26-tiles .sff26-tiles__slots { width: auto; }
}

/* Phones: one column, the link after the tiles */
@media (max-width: 767px) {
  .sff26-tiles { padding-top: 72px; }
  .sff26-tiles .sff26-tiles__w { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hd" "bd" "acts"; row-gap: 30px; }
  .sff26-tiles .sff26-tiles__grid,
  .sff26-tiles.sff26-tiles--mixed .sff26-tiles__grid,
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; gap: 12px; }
  .sff26-tiles .sff26-tiles__tile,
  .sff26-tiles.sff26-tiles--mixed .sff26-tiles__tile--wide,
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile,
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--1,
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--2,
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--3 { grid-column: 1 / -1; grid-row: auto; }
  .sff26-tiles.sff26-tiles--mixed .sff26-tiles__tile { height: 210px; }
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile { height: 250px; }
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--1 { height: 340px; }
  .sff26-tiles .sff26-tiles__tile--solid,
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--solid { height: auto; }
  .sff26-tiles .sff26-tiles__a { padding: 18px; }
  .sff26-tiles .sff26-tiles__tile--solid .sff26-tiles__a { padding: 24px 20px; }
  .sff26-tiles .sff26-tiles__go { right: 12px; bottom: 12px; width: 36px; height: 36px; }
  .sff26-tiles .sff26-tiles__tile--link .sff26-tiles__t,
  .sff26-tiles .sff26-tiles__tile--link .sff26-tiles__p { padding-right: 40px; }
  .sff26-tiles .sff26-tiles__tag { top: 12px; left: 12px; height: 26px; padding: 0 10px; font-size: 12px; }
  .sff26-tiles .sff26-tiles__slot { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .sff26-tiles .sff26-tiles__slot span:last-child { grid-column: 2; }

  /* Phone type. The theme's main.css and the page's own head styles set
     h2 / h3 / p sizes and weights on phones with !important, so these must
     be !important too (phone typography only). */
  .sff26-tiles .sff26-tiles__h2 { font-size: 32px !important; line-height: 1.1 !important; font-weight: 600 !important; }
  .sff26-tiles .sff26-tiles__lead { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-tiles .sff26-tiles__t { font-size: 22px !important; line-height: 1.2 !important; font-weight: 600 !important; }
  .sff26-tiles.sff26-tiles--feature .sff26-tiles__tile--1 .sff26-tiles__t { font-size: 28px !important; }
  .sff26-tiles .sff26-tiles__p { font-size: 14px !important; line-height: 1.45 !important; }
  .sff26-tiles.sff26-tiles--mixed .sff26-tiles__p { font-size: 15px !important; }
  .sff26-tiles .sff26-tiles__slot { font-size: 15px !important; line-height: 1.4 !important; }
}

/* Entrance, once: the tiles rise in one after another and their photos
   settle from a slight zoom. module.js adds --armed only when it can also
   reveal, so nothing is hidden without JavaScript or with reduced motion. */
.sff26-tiles.sff26-tiles--armed .sff26-tiles__tile { transition: opacity .6s ease, transform .85s cubic-bezier(.2, .9, .25, 1.1); transition-delay: calc(var(--sff26-i, 0) * 80ms); }
.sff26-tiles.sff26-tiles--armed .sff26-tiles__grid--settled .sff26-tiles__tile { transition-delay: 0s; }
.sff26-tiles.sff26-tiles--armed .sff26-tiles__grid:not(.sff26-tiles__grid--in) .sff26-tiles__tile { opacity: 0; transform: translateY(28px) scale(.97); }
.sff26-tiles.sff26-tiles--armed .sff26-tiles__grid:not(.sff26-tiles__grid--in) .sff26-tiles__a > img { transform: scale(1.14); }
.sff26-tiles.sff26-tiles--armed .sff26-tiles__grid--in:not(.sff26-tiles__grid--settled) .sff26-tiles__a > img { transition: transform 1.5s var(--sff26-ease); transition-delay: calc(var(--sff26-i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  .sff26-tiles .sff26-tiles__a,
  .sff26-tiles .sff26-tiles__a > img,
  .sff26-tiles .sff26-tiles__go,
  .sff26-tiles .sff26-tiles__link::after,
  .sff26-tiles .sff26-tiles__link-ic,
  .sff26-tiles.sff26-tiles--armed .sff26-tiles__tile { transition: none; }
  .sff26-tiles.sff26-tiles--armed .sff26-tiles__grid:not(.sff26-tiles__grid--in) .sff26-tiles__tile { opacity: 1; transform: none; }
  .sff26-tiles.sff26-tiles--armed .sff26-tiles__grid:not(.sff26-tiles__grid--in) .sff26-tiles__a > img { transform: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-tiles:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   The photo tiles keep their dark fade and white words on every forum (they read on the photo, not the page).
   --------------------------------------------------------------------------------------------------------------- */
.sff26-tiles:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-hl-ink: var(--forum-dark, #141414); /* the arrow on the highlight (relative colours below) */
  --sff26-fg: var(--forum-text, #fff);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
/* a solid tile's words: the ink of its colour (--sff26-on in the markup is SFF's; this reads the forum's colour) */
.sff26-tiles:not(.skin-sff *) .sff26-tiles__tile--solid .sff26-tiles__a { --sff26-on: var(--forum-dark, #141414); }
@supports (color: oklch(from red l c h)) {
  /* ink on a fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
  .sff26-tiles:not(.skin-sff *) { --sff26-hl-ink: oklch(from var(--sff26-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248); }
  .sff26-tiles:not(.skin-sff *) .sff26-tiles__tile--solid .sff26-tiles__a { --sff26-on: oklch(from var(--sff26-c) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248); }
}
@media (min-width: 768px) {
  .sff26-tiles:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-tiles:not(.skin-sff *) .sff26-tiles__h2 { color: var(--sff26-fg); }
.sff26-tiles:not(.skin-sff *) .sff26-tiles__link,
.sff26-tiles:not(.skin-sff *) .sff26-tiles__link:hover,
.sff26-tiles:not(.skin-sff *) .sff26-tiles__link:focus-visible { color: var(--sff26-hl-text); }
/* on a photo: the light grey line and the white note, as on SFF */
.sff26-tiles:not(.skin-sff *) .sff26-tiles__p { --forum-text-body: #dcdcdc; }
.sff26-tiles:not(.skin-sff *) .sff26-tiles__p--note { --forum-text-body: #fff; }
.sff26-tiles:not(.skin-sff *) a.sff26-tiles__a:hover .sff26-tiles__go,
.sff26-tiles:not(.skin-sff *) a.sff26-tiles__a:focus-visible .sff26-tiles__go { color: var(--sff26-hl-ink); }
/* on a colour: everything in the colour's ink */
.sff26-tiles:not(.skin-sff *) .sff26-tiles__tile--solid .sff26-tiles__p,
.sff26-tiles:not(.skin-sff *) .sff26-tiles__tile--solid .sff26-tiles__slot { --forum-text-body: var(--sff26-on, var(--forum-dark, #141414)); }
/* the solid tile's tag: a hairline pill in its ink, not SFF's 12% dark wash, which pulled the ink below 4.5:1 on a
   mid-tone fill (Cambodia's orchid: 4.43) */
.sff26-tiles:not(.skin-sff *) .sff26-tiles__tile--solid .sff26-tiles__tag { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
/* Phones, mixed tiles (13 Oct, BSS Cambodia's homepage pillars, with their descriptions, and /why-attend): on a short phone
   tile the text climbs past the scrim's clear top onto the photo's bright parts (Phsar's golden dome); a taller, darker
   scrim keeps it legible */
@media (max-width: 767px) {
  .sff26-tiles:not(.skin-sff *).sff26-tiles--mixed .sff26-tiles__a::before { background: linear-gradient(0deg, rgba(20, 20, 20, .92) 0%, rgba(20, 20, 20, .78) 50%, rgba(20, 20, 20, .45) 100%); }
}