/* ==========================================================================
   LF CONTENT BOXES GRID
   Equal-size cards, 2x2 / 3x3 / 4-across, auto-condensing.

   How the sizing works
   --------------------
   - .lf-cb__grid is a CSS grid with N equal columns (minmax(0,1fr)), so
     every card is exactly the same width.
   - grid-auto-rows: 1fr makes every row the same height as the tallest row,
     and align-items: stretch makes each card fill its cell. Result: every
     card is the same width AND height no matter what's inside it.
   - The column count is NOT hard-coded here. module.html resolves it against
     the real number of cards and hands it over as custom properties:
       --lf-cb-tracks      wide  (columns x 2)
       --lf-cb-tracks-md   mid   (2 columns x 2 = 4)
     The grid has TWICE as many tracks as columns and every card spans two.
     That lets a short last row be centered: module.html puts --lf-cb-gs
     (wide) / --lf-cb-gs-md (mid) on the first card of that row, and the rule
     below starts the card on that line; the rest of the row auto-flows after
     it. 5 cards at 2 columns -> 2 + 2 + 1 centered. 5 at 3 -> 3 + 2 centered.
   - .lf-cb is a container-query container, so the condense points key off the
     width the MODULE is given and it still behaves inside a half-width
     HubSpot column. The @media rules are a fallback for older browsers.

   Tweak the breakpoints in the CONDENSE section at the bottom.
   ========================================================================== */

.lf-cb {
  /* Brand tokens */
  --lf-blue: #236092;
  --lf-dark-azure: #152f45;
  --lf-yellow: #f9db6c;

  /* Defaults; the module.html wrapper overrides these inline from the Style tab */
  --lf-cb-cols: 3;
  --lf-cb-cols-md: 2;
  --lf-cb-cols-sm: 1;
  --lf-cb-tracks: 6;
  --lf-cb-tracks-md: 4;
  --lf-cb-gap: 24px;
  --lf-cb-icon: 50px;
  --lf-cb-card-bg: #ffffff;
  --lf-cb-heading: var(--lf-blue);
  --lf-cb-text: #000000;

  /* Card look (matches existing dew Content Boxes on the site) */
  --lf-cb-radius: 14px;
  --lf-cb-pad: 40px;
  --lf-cb-border-w: 0px;
  --lf-cb-border-color: #dfe6eb;
  --lf-cb-h-size: 20px;
  --lf-cb-b-size: 18px;
  --lf-cb-h-gap: 10px;
  --lf-cb-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
  --lf-cb-shadow-hover: 0 16px 34px rgba(21, 47, 69, 0.18);

  container-type: inline-size;
  container-name: lf-cb;

  width: 100%;
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

.lf-cb,
.lf-cb *,
.lf-cb *::before,
.lf-cb *::after {
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.lf-cb__grid {
  display: grid;
  grid-template-columns: repeat(var(--lf-cb-tracks), minmax(0, 1fr));
  grid-auto-rows: 1fr;          /* every row = tallest row  */
  align-items: stretch;         /* every card fills its row */
  gap: var(--lf-cb-gap);
  width: 100%;
  margin: 0;
  padding: 0;
}


/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.lf-cb__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;

  /* Two tracks per card; --lf-cb-gs is only ever set on the first card of a
     short last row (see module.html) and shifts that row to center it. */
  grid-column: var(--lf-cb-gs, auto) / span 2;

  padding: var(--lf-cb-pad);

  /* Resolved per card so the alternate (checkerboard) rules further down can
     swap a single card's colors without touching the wrapper values. */
  --lf-cb-c-bg: var(--lf-cb-card-bg);
  --lf-cb-c-heading: var(--lf-cb-heading);
  --lf-cb-c-text: var(--lf-cb-text);
  --lf-cb-c-border: var(--lf-cb-border-color);
  --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
  --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
  --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
  --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));

  background: var(--lf-cb-c-bg);
  border: var(--lf-cb-border-w) solid var(--lf-cb-c-border);
  border-radius: var(--lf-cb-radius);
  box-shadow: var(--lf-cb-shadow);

  color: var(--lf-cb-c-text);
  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

/* With the shadow off, keep at least a hairline border so cards don't float
   invisibly - a wider border from the Style tab wins via max(). */
.lf-cb--no-shadow .lf-cb__card {
  box-shadow: none;
  border-width: max(var(--lf-cb-border-w), 1px);
}


/* --------------------------------------------------------------------------
   Clickable cards
   The card itself is never an <a>; an invisible overlay anchor stretched
   across it carries the link. Card text therefore never sits inside an
   anchor, so theme link styling (hover underlines etc.) can't reach it.
   -------------------------------------------------------------------------- */

.lf-cb__card--linked {
  position: relative;
}

.lf-cb__card--linked .lf-cb__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}

/* Inline links typed into the card copy ride above the overlay so they stay
   individually clickable inside a clickable card. */
.lf-cb__body a {
  position: relative;
  z-index: 2;
}

/* Hover / focus state - every value below is set per-instance from the
   module's Style tab (Hover section) via the wrapper's custom properties. */
.lf-cb__card--linked:hover,
.lf-cb__card--linked:focus-within {
  transform: translateY(var(--lf-cb-hv-lift, -3px));
  box-shadow: var(--lf-cb-hv-shadow, var(--lf-cb-shadow-hover));
  background: var(--lf-cb-c-hv-bg);
  border-color: var(--lf-cb-c-hv-border);
}

.lf-cb__card--linked:hover .lf-cb__heading,
.lf-cb__card--linked:focus-within .lf-cb__heading {
  color: var(--lf-cb-c-hv-heading);
}

.lf-cb__card--linked:hover .lf-cb__body,
.lf-cb__card--linked:focus-within .lf-cb__body {
  color: var(--lf-cb-c-hv-text);
}

/* Shadow off means shadow off, hovered or not */
.lf-cb--no-shadow .lf-cb__card--linked:hover,
.lf-cb--no-shadow .lf-cb__card--linked:focus-within {
  box-shadow: none;
}

.lf-cb__overlay:focus-visible {
  outline: 2px solid var(--lf-yellow);
  outline-offset: 2px;
}


/* Alignment */
.lf-cb--align-center .lf-cb__card {
  align-items: center;
  text-align: center;
}

.lf-cb--align-left .lf-cb__card {
  align-items: flex-start;
  text-align: left;
}


/* Icon */
.lf-cb__icon {
  flex: 0 0 auto;
  width: var(--lf-cb-icon);
  height: var(--lf-cb-icon);
  margin: 0 0 20px;
}

.lf-cb__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Heading */
.lf-cb h4.lf-cb__heading {
  margin: 0 0 var(--lf-cb-h-gap);
  color: var(--lf-cb-c-heading);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: var(--lf-cb-h-size);
  font-weight: 900;
  line-height: 1.25;
  transition: color 0.2s ease;
}

/* The gap belongs between heading and body - no trailing gap when the
   heading is the last thing in the card. */
.lf-cb h4.lf-cb__heading:last-child {
  margin-bottom: 0;
}


/* Body */
.lf-cb__body {
  flex: 1 1 auto;
  width: 100%;
  color: var(--lf-cb-c-text);
  font-size: var(--lf-cb-b-size);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.lf-cb__body p {
  margin: 0 0 10px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.lf-cb__body p:last-child {
  margin-bottom: 0;
}

.lf-cb__body ul,
.lf-cb__body ol {
  margin: 0 0 10px;
  padding-left: 1.2em;
  text-align: left;
}

.lf-cb__body a {
  color: var(--lf-blue);
  text-decoration: underline;
}


/* ==========================================================================
   CONDENSE
   Wide -> mid -> single file as the module gets narrower.

   Each step swaps which pre-resolved track count is in play, and which
   card-start property centers a short last row. The wide count sets the
   class, which only decides WHEN the first step happens (4 columns need
   more room than 3, which need more than 2).

     5 cards @ 3 cols  ->  3 + 2 (centered)  ->  2 + 2 + 1 (centered)  ->  single file
     4 cards @ 4 cols  ->  4 across          ->  2 x 2                 ->  single file
   ========================================================================== */

/* --- Container queries (modern browsers) --- */

@container lf-cb (max-width: 1080px) {
  .lf-cb--cols-4 .lf-cb__grid {
    grid-template-columns: repeat(var(--lf-cb-tracks-md), minmax(0, 1fr));
  }
  .lf-cb--cols-4 .lf-cb__card {
    grid-column: var(--lf-cb-gs-md, auto) / span 2;
  }
}

@container lf-cb (max-width: 900px) {
  .lf-cb--cols-3 .lf-cb__grid {
    grid-template-columns: repeat(var(--lf-cb-tracks-md), minmax(0, 1fr));
  }
  .lf-cb--cols-3 .lf-cb__card {
    grid-column: var(--lf-cb-gs-md, auto) / span 2;
  }
}

@container lf-cb (max-width: 560px) {
  /* Two classes on purpose: this has to out-rank (or at least tie, and it comes
     later) the .lf-cb--cols-N mid rules above, or single file never wins.
     Single file = one column = two tracks; every card starts at line 1. */
  .lf-cb .lf-cb__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lf-cb .lf-cb__card {
    grid-column: auto / span 2;
    padding: min(var(--lf-cb-pad), 28px);
  }
}


/* --- Media query fallback (browsers without @container) --- */

@supports not (container-type: inline-size) {

  @media (max-width: 1180px) {
    .lf-cb--cols-4 .lf-cb__grid {
      grid-template-columns: repeat(var(--lf-cb-tracks-md), minmax(0, 1fr));
    }
    .lf-cb--cols-4 .lf-cb__card {
      grid-column: var(--lf-cb-gs-md, auto) / span 2;
    }
  }

  @media (max-width: 1000px) {
    .lf-cb--cols-3 .lf-cb__grid {
      grid-template-columns: repeat(var(--lf-cb-tracks-md), minmax(0, 1fr));
    }
    .lf-cb--cols-3 .lf-cb__card {
      grid-column: var(--lf-cb-gs-md, auto) / span 2;
    }
  }

  @media (max-width: 640px) {
    .lf-cb .lf-cb__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lf-cb .lf-cb__card {
      --lf-cb-pad: 28px;
      grid-column: auto / span 2;
    }
  }

}


/* Mobile type tweaks (screen-based, regardless of container) */

@media (max-width: 520px) {
  .lf-cb h4.lf-cb__heading {
    font-size: min(var(--lf-cb-h-size), 18px);
  }

  .lf-cb__body {
    font-size: min(var(--lf-cb-b-size), 16px);
  }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lf-cb__card {
    transition: none;
  }
}


/* ==========================================================================
   ALTERNATE CARD STYLE (checkerboard)

   Only active when the wrapper carries .lf-cb--alt (Style tab > Alternate
   card style > toggle on). Every other card then takes the --lf-cb-alt-*
   colors. The point is a checkerboard, so the "every other" rule is adjusted
   wherever the grid has an EVEN number of columns (plain odd/even would give
   vertical stripes there):

     1 or 3 columns  ->  cards 2, 4, 6 ...              (odd/even)
     2 columns       ->  cards 2, 3 | 6, 7 | 10, 11 ...  (4n+2, 4n+3)
     4 columns       ->  cards 2, 4 | 5, 7 | 10, 12 ...  (8n+2, 8n+4, 8n+5, 8n+7)

   Each even-column rule is scoped to exactly the width range where that
   column count is in play (same breakpoints as the CONDENSE section), so the
   odd/even default takes back over in single file on phones.
   ========================================================================== */

/* Default: every other card (correct for 1 and 3 columns) */
.lf-cb--alt .lf-cb__card:nth-child(even) {
  --lf-cb-c-bg: var(--lf-cb-alt-bg);
  --lf-cb-c-heading: var(--lf-cb-alt-heading);
  --lf-cb-c-text: var(--lf-cb-alt-text);
  --lf-cb-c-border: var(--lf-cb-alt-border);
  --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
  --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
  --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
  --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
}

/* --- Container queries (modern browsers) --- */

/* 2 columns chosen: two across everywhere above single file */
@container lf-cb (min-width: 561px) {
  .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+2),
  .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+3) {
      --lf-cb-c-bg: var(--lf-cb-alt-bg);
      --lf-cb-c-heading: var(--lf-cb-alt-heading);
      --lf-cb-c-text: var(--lf-cb-alt-text);
      --lf-cb-c-border: var(--lf-cb-alt-border);
      --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
      --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
      --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
      --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
  }

  .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+1),
  .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+4) {
      --lf-cb-c-bg: var(--lf-cb-card-bg);
      --lf-cb-c-heading: var(--lf-cb-heading);
      --lf-cb-c-text: var(--lf-cb-text);
      --lf-cb-c-border: var(--lf-cb-border-color);
      --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
      --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
      --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
      --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
  }
}

/* 3 columns chosen, condensed to two */
@container lf-cb (min-width: 561px) and (max-width: 900px) {
  .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+2),
  .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+3) {
      --lf-cb-c-bg: var(--lf-cb-alt-bg);
      --lf-cb-c-heading: var(--lf-cb-alt-heading);
      --lf-cb-c-text: var(--lf-cb-alt-text);
      --lf-cb-c-border: var(--lf-cb-alt-border);
      --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
      --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
      --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
      --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
  }

  .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+1),
  .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+4) {
      --lf-cb-c-bg: var(--lf-cb-card-bg);
      --lf-cb-c-heading: var(--lf-cb-heading);
      --lf-cb-c-text: var(--lf-cb-text);
      --lf-cb-c-border: var(--lf-cb-border-color);
      --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
      --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
      --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
      --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
  }
}

/* 4 columns chosen, condensed to two */
@container lf-cb (min-width: 561px) and (max-width: 1080px) {
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+2),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+3) {
      --lf-cb-c-bg: var(--lf-cb-alt-bg);
      --lf-cb-c-heading: var(--lf-cb-alt-heading);
      --lf-cb-c-text: var(--lf-cb-alt-text);
      --lf-cb-c-border: var(--lf-cb-alt-border);
      --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
      --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
      --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
      --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
  }

  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+1),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+4) {
      --lf-cb-c-bg: var(--lf-cb-card-bg);
      --lf-cb-c-heading: var(--lf-cb-heading);
      --lf-cb-c-text: var(--lf-cb-text);
      --lf-cb-c-border: var(--lf-cb-border-color);
      --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
      --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
      --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
      --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
  }
}

/* 4 columns chosen, four across */
@container lf-cb (min-width: 1081px) {
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+2),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+4),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+5),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+7) {
      --lf-cb-c-bg: var(--lf-cb-alt-bg);
      --lf-cb-c-heading: var(--lf-cb-alt-heading);
      --lf-cb-c-text: var(--lf-cb-alt-text);
      --lf-cb-c-border: var(--lf-cb-alt-border);
      --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
      --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
      --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
      --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
  }

  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+1),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+3),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+6),
  .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+8) {
      --lf-cb-c-bg: var(--lf-cb-card-bg);
      --lf-cb-c-heading: var(--lf-cb-heading);
      --lf-cb-c-text: var(--lf-cb-text);
      --lf-cb-c-border: var(--lf-cb-border-color);
      --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
      --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
      --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
      --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
  }
}


/* --- Media query fallback (browsers without @container) --- */

@supports not (container-type: inline-size) {

  @media (min-width: 641px) {
    .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+2),
    .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+3) {
        --lf-cb-c-bg: var(--lf-cb-alt-bg);
        --lf-cb-c-heading: var(--lf-cb-alt-heading);
        --lf-cb-c-text: var(--lf-cb-alt-text);
        --lf-cb-c-border: var(--lf-cb-alt-border);
        --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
        --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
        --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
        --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
    }

    .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+1),
    .lf-cb--alt.lf-cb--cols-2 .lf-cb__card:nth-child(4n+4) {
        --lf-cb-c-bg: var(--lf-cb-card-bg);
        --lf-cb-c-heading: var(--lf-cb-heading);
        --lf-cb-c-text: var(--lf-cb-text);
        --lf-cb-c-border: var(--lf-cb-border-color);
        --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
        --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
        --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
        --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
    }
  }

  @media (min-width: 641px) and (max-width: 1000px) {
    .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+2),
    .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+3) {
        --lf-cb-c-bg: var(--lf-cb-alt-bg);
        --lf-cb-c-heading: var(--lf-cb-alt-heading);
        --lf-cb-c-text: var(--lf-cb-alt-text);
        --lf-cb-c-border: var(--lf-cb-alt-border);
        --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
        --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
        --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
        --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
    }

    .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+1),
    .lf-cb--alt.lf-cb--cols-3 .lf-cb__card:nth-child(4n+4) {
        --lf-cb-c-bg: var(--lf-cb-card-bg);
        --lf-cb-c-heading: var(--lf-cb-heading);
        --lf-cb-c-text: var(--lf-cb-text);
        --lf-cb-c-border: var(--lf-cb-border-color);
        --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
        --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
        --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
        --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
    }
  }

  @media (min-width: 641px) and (max-width: 1180px) {
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+2),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+3) {
        --lf-cb-c-bg: var(--lf-cb-alt-bg);
        --lf-cb-c-heading: var(--lf-cb-alt-heading);
        --lf-cb-c-text: var(--lf-cb-alt-text);
        --lf-cb-c-border: var(--lf-cb-alt-border);
        --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
        --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
        --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
        --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
    }

    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+1),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(4n+4) {
        --lf-cb-c-bg: var(--lf-cb-card-bg);
        --lf-cb-c-heading: var(--lf-cb-heading);
        --lf-cb-c-text: var(--lf-cb-text);
        --lf-cb-c-border: var(--lf-cb-border-color);
        --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
        --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
        --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
        --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
    }
  }

  @media (min-width: 1181px) {
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+2),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+4),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+5),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+7) {
        --lf-cb-c-bg: var(--lf-cb-alt-bg);
        --lf-cb-c-heading: var(--lf-cb-alt-heading);
        --lf-cb-c-text: var(--lf-cb-alt-text);
        --lf-cb-c-border: var(--lf-cb-alt-border);
        --lf-cb-c-hv-bg: var(--lf-cb-alt-hv-bg);
        --lf-cb-c-hv-heading: var(--lf-cb-alt-hv-heading);
        --lf-cb-c-hv-text: var(--lf-cb-alt-hv-text);
        --lf-cb-c-hv-border: var(--lf-cb-alt-hv-border);
    }

    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+1),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+3),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+6),
    .lf-cb--alt.lf-cb--cols-4 .lf-cb__card:nth-child(8n+8) {
        --lf-cb-c-bg: var(--lf-cb-card-bg);
        --lf-cb-c-heading: var(--lf-cb-heading);
        --lf-cb-c-text: var(--lf-cb-text);
        --lf-cb-c-border: var(--lf-cb-border-color);
        --lf-cb-c-hv-bg: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
        --lf-cb-c-hv-heading: var(--lf-cb-hv-heading, var(--lf-cb-heading));
        --lf-cb-c-hv-text: var(--lf-cb-hv-text, var(--lf-cb-text));
        --lf-cb-c-hv-border: var(--lf-cb-hv-border, var(--lf-cb-border-color));
    }
  }

}