.font-card-grid-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-300);
  /* Excludes every descendant (cards, the grid, the load-more button) from
     the page's scroll anchoring — set here rather than just on .font-card-grid
     because anchoring would otherwise still pick a card or the load-more
     button itself as the anchor node. Without this, growing the grid (Load
     more) or rebuilding it (a filter change) makes the browser shift
     scrollTop to hold that node's viewport position, which either strands
     new cards above the fold or randomly jumps the page. */
  overflow-anchor: none;
}

.font-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-100);
  width: 100%;
}

/* Size L (2-up): 1200-1679px. Size XL/widescreen (3-up): 1680px+. */
@media (min-width: 600px) {
  .font-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1680px) {
  .font-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Row (list) layout — single column regardless of breakpoint */
.font-card-grid.is-list {
  grid-template-columns: 1fr;
}

.font-card-load-more {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-100);
  padding: 10px var(--spacing-400);
  border: 1.5px solid var(--color-gray-950);
  border-radius: 24px;
  background: transparent;
  font-family: var(--body-font-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gray-950);
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.load-more-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url('/express/code/icons/plus-icon.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('/express/code/icons/plus-icon.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
}

.font-card-load-more:hover {
  background-color: var(--Palette-gray-200);
}

.font-card-load-more:focus-visible {
  outline: 2px solid var(--color-focus-ring-strong);
  outline-offset: 4px;
  border-radius: 28px;
  background-color: var(--Palette-gray-200);
}

.font-card-load-more[hidden] {
  display: none;
}