#hop-gutenberg.lr-reference .benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#hop-gutenberg.lr-reference .lr-auto-benefits-controls { display: none; }
#hop-gutenberg.lr-reference :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (max-width:600px) {
  #hop-gutenberg.lr-reference .benefit-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; scrollbar-width: thin; position: relative; padding-bottom: 12px; }
  #hop-gutenberg.lr-reference .benefit-grid > .benefit { flex: 0 0 100%; scroll-snap-align: start; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1200px; margin: 16px 20px 0; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-progress > span[aria-hidden] { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
  #hop-gutenberg.lr-reference .lr-auto-benefits-progress > .is-current { background: var(--blue); }
  #hop-gutenberg.lr-reference .lr-auto-benefits-status { flex-basis: 100%; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-nav { display: flex; gap: 8px; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-nav button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--blue); cursor: pointer; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-nav button:disabled { opacity: .4; cursor: default; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
  #hop-gutenberg.lr-reference .lr-auto-benefits-prev svg { transform: rotate(180deg); }
}