/* ====================================================================
   Four Eyes Blog Reimagined — fbr-blog.css  v1.5.0
   All selectors scoped to .fbr-wrap for theme specificity.
   Fonts fully inherited — no absolute sizes set.
   Brand: navy #2b3852 · orange #f47920 · radius: 0 1em 0 1em
   ==================================================================== */

/* ── Custom properties + base ──────────────────────────────────────── */
.fbr-wrap {
  --fe-navy:        #2b3852;
  --fe-navy-deep:   #1a2535;
  --fe-orange:      #f47920;
  --fe-orange-dark: #d4620e;
  --fe-text:        #2b3852;
  --fe-muted:       #6b7a8d;
  --fe-border:      #dde1e7;
  --fe-bg:          #f4f4f2;
  --fe-surface:     #ffffff;
  --fe-ease:        cubic-bezier(.4, 0, .2, 1);
  --fe-t:           .18s;
  --fe-gap:         1.25rem;
  color: var(--fe-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
  position: relative;
  /* Scale down to ~87.5% of theme base so cards stay compact */
  font-size: 0.875em;
}

/* Reset heading sizes — prevents theme h2/h3 from inflating card titles */
.fbr-wrap h1,
.fbr-wrap h2,
.fbr-wrap h3 {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Scoped reset — does not touch theme */
.fbr-wrap *,
.fbr-wrap *::before,
.fbr-wrap *::after { box-sizing: border-box; }

.fbr-wrap img { display: block; max-width: 100%; }

.fbr-wrap .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ════════════════════════════════════════════════════════════════════
   FILTER PANEL
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-panel {
  margin-bottom: 2rem;
}

/* ── Search ─────────────────────────────────────────────────────────── */
.fbr-wrap .fbr-search-wrap {
  position: relative;
  margin-bottom: 1.35rem;
}

/* Icon on the RIGHT */
.fbr-wrap .fbr-search-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1em;
  height: 1.1em;
  color: var(--fe-muted);
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* Clear button sits in the same right slot; JS toggles visibility */
.fbr-wrap .fbr-search-clear {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--fe-muted);
  padding: .2em .3em;
  line-height: 1;
  z-index: 3;
  transition: color var(--fe-t);
  font-size: 1em;
}
.fbr-wrap .fbr-search-clear:hover { color: var(--fe-orange); }

.fbr-wrap .fbr-search {
  width: 100%;
  /* Normal left pad, extra right pad for icon */
  padding: .75em 2.8em .75em 1em;
  font-size: inherit;
  font-family: inherit;
  border: 1.5px solid var(--fe-border);
  border-radius: 0 1em 0 1em;
  background: var(--fe-surface);
  color: var(--fe-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--fe-t) var(--fe-ease);
}
.fbr-wrap .fbr-search::placeholder { color: var(--fe-muted); }
.fbr-wrap .fbr-search:focus { border-color: var(--fe-orange); }

/* ── Category tabs ───────────────────────────────────────────────── */
.fbr-wrap .fbr-row {
  border-bottom: 2px solid var(--fe-border);
  margin-bottom: 1rem;
}

/* Cats wrap onto multiple lines — no overflow, no clip */
.fbr-wrap .fbr-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}

.fbr-wrap .fbr-cat {
  /* Reset */
  appearance: none; -webkit-appearance: none;
  background: none; border: none; outline: none;
  /* Tab style */
  padding: .65em 1.1em;
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .01em;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--fe-muted);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  transition: color var(--fe-t), border-color var(--fe-t);
}
.fbr-wrap .fbr-cat:hover { color: var(--fe-text); }
.fbr-wrap .fbr-cat.active {
  color: var(--fe-orange);
  border-bottom-color: var(--fe-orange);
}

.fbr-wrap .fbr-cat-count {
  font-size: .78em;
  font-weight: 600;
  color: var(--fe-muted);
  background: var(--fe-bg);
  border-radius: 3px;
  padding: .1em .4em;
  line-height: 1.5;
}
.fbr-wrap .fbr-cat.active .fbr-cat-count {
  background: rgba(244,121,32,.12);
  color: var(--fe-orange);
}

/* ── Layout toggle (lives in meta bar) ───────────────────────────── */
.fbr-wrap .fbr-layout-toggle {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  margin-right: .5rem;
}

.fbr-wrap .fbr-layout-btn {
  appearance: none; -webkit-appearance: none;
  width: 2.2em; height: 2.2em;
  border: 1.5px solid var(--fe-border);
  border-radius: 0 .75em 0 .75em;
  background: var(--fe-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fe-muted);
  cursor: pointer;
  transition: color var(--fe-t), border-color var(--fe-t), background var(--fe-t);
  padding: .35em;
}
.fbr-wrap .fbr-layout-btn svg { width: 100%; height: 100%; }
.fbr-wrap .fbr-layout-btn:hover { color: var(--fe-navy); border-color: var(--fe-navy); }
.fbr-wrap .fbr-layout-btn.active { background: var(--fe-navy); border-color: var(--fe-navy); color: #fff; }

/* ── Tag chips ───────────────────────────────────────────────────── */
.fbr-wrap .fbr-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em;
}

.fbr-wrap .fbr-tags-label {
  font-size: .78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fe-muted);
}

.fbr-wrap .fbr-tag {
  appearance: none; -webkit-appearance: none;
  padding: .28em .75em;
  font-size: .88em;
  font-family: inherit;
  border: 1.5px solid var(--fe-border);
  border-radius: 0 .75em 0 .75em;
  background: var(--fe-surface);
  color: var(--fe-muted);
  cursor: pointer;
  transition: color var(--fe-t), border-color var(--fe-t), background var(--fe-t);
}
.fbr-wrap .fbr-tag:hover { border-color: var(--fe-orange); color: var(--fe-orange); }
.fbr-wrap .fbr-tag.active { background: var(--fe-orange); border-color: var(--fe-orange); color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   META BAR
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-meta-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.fbr-wrap .fbr-count { color: var(--fe-muted); margin: 0; font-weight: 500; }
.fbr-wrap .fbr-count strong { color: var(--fe-text); font-weight: 700; }

.fbr-wrap .fbr-active-filters { display: flex; flex-wrap: wrap; gap: .35em; flex: 1; }

.fbr-wrap .fbr-badge {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .28em .7em;
  font-weight: 700;
  background: rgba(244,121,32,.1);
  color: var(--fe-orange-dark);
  border-radius: 0 .75em 0 .75em;
  border: 1px solid rgba(244,121,32,.2);
}

.fbr-wrap .fbr-badge-rm {
  border: none; background: transparent; color: inherit;
  padding: 0; line-height: 1; opacity: .6; cursor: pointer;
  transition: opacity var(--fe-t); font-size: 1em;
}
.fbr-wrap .fbr-badge-rm:hover { opacity: 1; }

.fbr-wrap .fbr-clear-all {
  appearance: none; -webkit-appearance: none;
  color: var(--fe-orange); background: transparent; border: none;
  font-weight: 700; font-family: inherit; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.fbr-wrap .fbr-clear-all:hover { color: var(--fe-orange-dark); }

/* ════════════════════════════════════════════════════════════════════
   SECTION LABEL
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-section-label {
  display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 1.25rem;
}
.fbr-wrap .fbr-section-label span {
  font-size: .78em; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fe-orange); white-space: nowrap;
}
.fbr-wrap .fbr-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--fe-border);
}

/* ════════════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-grid { position: relative; }

/* Editorial grid — 12-col */
.fbr-wrap .fbr-layout--grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--fe-gap);
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1)          { grid-column: 1 / -1; }
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(2),
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(3)          { grid-column: span 6; }
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(n+4)        { grid-column: span 4; }

/* Uniform grid — 3 equal columns, consistent row heights */
.fbr-wrap .fbr-layout--uniform {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fe-gap);
}
.fbr-wrap .fbr-layout--uniform .fbr-card__img-wrap { height: 200px; }

/* Masonry */
.fbr-wrap .fbr-layout--masonry { columns: 3; column-gap: var(--fe-gap); }
.fbr-wrap .fbr-layout--masonry .fbr-card {
  break-inside: avoid; display: inline-block; width: 100%; margin-bottom: var(--fe-gap);
}

/* List */
.fbr-wrap .fbr-layout--list { display: flex; flex-direction: column; gap: .85rem; }
.fbr-wrap .fbr-layout--list .fbr-card { flex-direction: row; max-height: 170px; }
.fbr-wrap .fbr-layout--list .fbr-card__img-wrap { flex: 0 0 240px; max-height: 170px; }
.fbr-wrap .fbr-layout--list .fbr-card__img-wrap img { height: 100%; }
.fbr-wrap .fbr-layout--list .fbr-card__body { padding: 1em 1.4em; }
.fbr-wrap .fbr-layout--list .fbr-card__excerpt { -webkit-line-clamp: 2; }

/* No results */
.fbr-wrap .fbr-no-results {
  grid-column: 1 / -1; text-align: center; padding: 5rem 1rem; color: var(--fe-muted);
}
.fbr-wrap .fbr-no-results svg {
  width: 3em; height: 3em; margin: 0 auto 1rem; opacity: .25; display: block;
}
.fbr-wrap .fbr-no-results p { margin: 0; }

/* ── Search term highlighting ───────────────────────────────────────── */
/* Covers: native <mark>, Relevanssi's .relevanssi-search-term, SearchWP <mark> */
.fbr-wrap mark,
.fbr-wrap .relevanssi-search-term {
  background: rgba(244, 121, 32, 0.18);
  color: var(--fe-navy);
  padding: 0 .1em;
  border-radius: 2px;
  font-style: normal;
  font-weight: 600;
  box-shadow: none;
}
/* Title highlights — slightly stronger contrast */
.fbr-wrap .fbr-card__title mark,
.fbr-wrap .fbr-card__title .relevanssi-search-term {
  background: rgba(244, 121, 32, 0.25);
}

/* ── fbr-embed (fbr_posts shortcode) ───────────────────────────────── */
.fbr-wrap.fbr-embed { padding-bottom: 2rem; }

/* No JS on embed pages — skip entrance animation, show cards immediately */
.fbr-wrap.fbr-embed .fbr-card { opacity: 1; transform: none; transition: border-top-color var(--fe-t); }

/* Simple pagination for embed shortcode */
.fbr-wrap .fbr-embed-pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  justify-content: center;
}
.fbr-wrap .fbr-embed-page-btn {
  color: var(--fe-orange);
  text-decoration: none;
  font-weight: 600;
  padding: .45em 1.1em;
  border-radius: 0 .75em 0 .75em;
  border: 1.5px solid var(--fe-orange);
  transition: background var(--fe-t), color var(--fe-t);
}
.fbr-wrap .fbr-embed-page-btn:hover {
  background: var(--fe-orange);
  color: #fff;
}
.fbr-wrap .fbr-embed-page-info { color: var(--fe-muted); font-size: .9em; }

/* ════════════════════════════════════════════════════════════════════
   CARD — base (border-radius: 0 1em 0 1em applied here)
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-card {
  background: var(--fe-surface);
  border-radius: 0 1em 0 1em;
  border: 1.5px solid var(--fe-border);
  border-top: 3px solid transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Entrance animation */
  opacity: 0;
  transform: translateY(14px);
  transition:
    border-top-color var(--fe-t) var(--fe-ease),
    opacity .32s var(--fe-ease),
    transform .32s var(--fe-ease);
}
.fbr-wrap .fbr-card.fbr-visible { opacity: 1; transform: translateY(0); }
.fbr-wrap .fbr-card:hover { border-top-color: var(--fe-orange); }

/* Image */
.fbr-wrap .fbr-card__img-wrap {
  display: block; overflow: hidden; flex-shrink: 0;
}
.fbr-wrap .fbr-layout--grid .fbr-card:not(:nth-child(1)) .fbr-card__img-wrap { max-height: 200px; }
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(2) .fbr-card__img-wrap,
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(3) .fbr-card__img-wrap { max-height: 230px; }
.fbr-wrap .fbr-layout--masonry .fbr-card__img-wrap { max-height: 220px; }

.fbr-wrap .fbr-card__img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .42s var(--fe-ease);
}
.fbr-wrap .fbr-card:hover .fbr-card__img-wrap img { transform: scale(1.03); }

/* Body */
.fbr-wrap .fbr-card__body {
  padding: 1em 1.2em 1.2em; display: flex; flex-direction: column; flex: 1;
}

/* Category — button reset, plain uppercase text link */
.fbr-wrap .fbr-card__cat {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; outline: none;
  padding: 0; margin: 0 0 .45em; line-height: 1.4;
  display: inline-block;
  font-size: .78em;
  font-family: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fe-orange);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--fe-t);
}
.fbr-wrap .fbr-card__cat:hover { color: var(--fe-orange-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Title */
.fbr-wrap .fbr-card__title {
  margin: 0 0 .5em; font-weight: 700; line-height: 1.35; color: var(--fe-text);
}
.fbr-wrap .fbr-card__title a { text-decoration: none; color: inherit; transition: color var(--fe-t); }
.fbr-wrap .fbr-card__title a:hover { color: var(--fe-orange); }

/* Excerpt */
.fbr-wrap .fbr-card__excerpt {
  font-size: .92em; color: var(--fe-muted); line-height: 1.6;
  margin: 0 0 .9em; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Footer */
.fbr-wrap .fbr-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: .45em; }

.fbr-wrap .fbr-card__meta {
  display: flex; align-items: center; gap: .4em; color: var(--fe-muted); font-size: .85em;
}
.fbr-wrap .fbr-dot { opacity: .35; }

.fbr-wrap .fbr-card__tags {
  display: flex; flex-wrap: wrap; gap: .3em; list-style: none; padding: 0; margin: 0;
}
.fbr-wrap .fbr-card__tag {
  font-size: .78em; padding: .18em .5em;
  background: var(--fe-bg); border: 1.5px solid var(--fe-border);
  border-radius: 0 .5em 0 .5em; color: var(--fe-muted);
}

/* ════════════════════════════════════════════════════════════════════
   HERO CARD — first grid card, image overlay
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) {
  position: relative;
  min-height: 500px;
  border: none;
  border-top: none;
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1):hover { border-top-color: transparent; }

/* Image fills card absolutely */
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__img-wrap {
  position: absolute; inset: 0; max-height: none; z-index: 0;
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__img-wrap img {
  height: 100%; transition: transform .55s var(--fe-ease);
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1):hover .fbr-card__img-wrap img {
  transform: scale(1.04);
}

/* Heavy gradient for text legibility */
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1)::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgba(20,30,45,.97)  0%,
    rgba(20,30,45,.70) 38%,
    rgba(20,30,45,.15) 68%,
    rgba(20,30,45,.00) 100%
  );
}

/* Body on top of gradient */
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__body {
  position: relative; z-index: 2;
  margin-top: auto; padding: 2.5em 2.75em;
  max-width: 780px; background: transparent; flex: none;
}

/* Category — white text on dark gradient (high contrast) */
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__cat {
  color: rgba(255,255,255,.75);
  font-size: .75em;
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__cat:hover {
  color: var(--fe-orange); text-decoration: none;
}

/* Hero title — white, larger, shadow for depth */
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__title {
  color: #fff; font-size: 1.65em; line-height: 1.2; margin-bottom: .6em;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__title a { color: inherit; }
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__title a:hover {
  color: rgba(255,255,255,.82);
}

.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__excerpt {
  color: rgba(255,255,255,.82); -webkit-line-clamp: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__meta {
  color: rgba(255,255,255,.6);
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__tag {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7);
}

/* Kill any cached ::after that may have previously shown "Read Article" text */
.fbr-wrap .fbr-card__body::after { content: none !important; display: none !important; }

/* "Read Article →" — hidden on all cards except the hero */
.fbr-wrap .fbr-card__read-more {
  display: none;
}

.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__read-more {
  display: inline-block;
  margin-top: .85em;
  font-size: .82em;
  font-weight: 800;
  color: var(--fe-orange);
  letter-spacing: .04em;
  text-decoration: none;
  position: relative;
  z-index: 3;
  transition: color var(--fe-t);
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__read-more:hover {
  color: var(--fe-orange-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* No-thumb hero: navy background */
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1).fbr-card--no-thumb {
  background: var(--fe-navy);
}
.fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1).fbr-card--no-thumb::after { display: none; }

/* ════════════════════════════════════════════════════════════════════
   LOADING
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-loading {
  display: none; position: absolute; inset: 0;
  background: rgba(244,244,242,.82);
  align-items: center; justify-content: center;
  border-radius: 0 1em 0 1em; z-index: 20;
}
.fbr-wrap.is-loading .fbr-loading { display: flex; }
.fbr-wrap.is-loading .fbr-grid { pointer-events: none; min-height: 320px; }

.fbr-wrap .fbr-spinner svg {
  width: 2.5em; height: 2.5em; color: var(--fe-orange);
  animation: fbr-spin .85s linear infinite; display: block;
}
@keyframes fbr-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════════════ */
.fbr-wrap .fbr-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--fe-border);
}

.fbr-wrap .fbr-pager {
  appearance: none; -webkit-appearance: none;
  min-width: 2.4em; height: 2.4em; padding: 0 .8em;
  border: none;
  border-radius: 0 1em 0 1em;
  background: transparent;
  color: var(--fe-muted); font-family: inherit; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--fe-t), background var(--fe-t);
}
.fbr-wrap .fbr-pager:hover:not([disabled]) {
  color: var(--fe-orange);
  background: rgba(244,121,32,.08);
}
.fbr-wrap .fbr-pager.fbr-pager--active {
  color: var(--fe-orange);
  background: rgba(244,121,32,.12);
}
.fbr-wrap .fbr-pager[disabled] { opacity: .3; cursor: default; }

.fbr-wrap .fbr-pager-info { color: var(--fe-muted); padding: 0 .6em; }
.fbr-wrap .fbr-pager-info strong { color: var(--fe-text); }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) { min-height: 400px; }
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__body { padding: 2em; }
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__title { font-size: 1.55em; }
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(n+4) { grid-column: span 6; }
  .fbr-wrap .fbr-layout--uniform { grid-template-columns: repeat(2, 1fr); }
  .fbr-wrap .fbr-layout--masonry { columns: 2; }
}

@media (max-width: 720px) {
  .fbr-wrap { padding: 0 1rem 3rem; }
  .fbr-wrap .fbr-layout--grid { grid-template-columns: 1fr; }
  .fbr-wrap .fbr-layout--grid .fbr-card,
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(n) { grid-column: span 1; }
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) { min-height: 300px; }
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__body { padding: 1.5em; }
  .fbr-wrap .fbr-layout--grid .fbr-card:nth-child(1) .fbr-card__title { font-size: 1.3em; }
  .fbr-wrap .fbr-layout--uniform { grid-template-columns: 1fr; }
  .fbr-wrap .fbr-layout--uniform .fbr-card__img-wrap { height: 180px; }
  .fbr-wrap .fbr-layout--masonry { columns: 1; }
  .fbr-wrap .fbr-layout--list .fbr-card { flex-direction: column; max-height: none; }
  .fbr-wrap .fbr-layout--list .fbr-card__img-wrap { flex: unset; max-height: 180px; }
  .fbr-wrap .fbr-row { margin-bottom: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fbr-wrap .fbr-card { opacity: 1; transform: none; transition: border-top-color var(--fe-t); }
  .fbr-wrap .fbr-card__img-wrap img { transition: none; }
  .fbr-wrap .fbr-spinner svg { animation: none; }
}