.bon-tiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.bon-tiles--3x2 .bon-tile__media{aspect-ratio:3/2}
.bon-tiles--square .bon-tile__media{aspect-ratio:1/1}
.bon-tiles--radius-none .bon-tile__media,.bon-tiles--radius-none .bon-tile{border-radius:0}
.bon-tiles--radius-sm .bon-tile__media,.bon-tiles--radius-sm .bon-tile{border-radius:.25rem}
.bon-tiles--radius-md .bon-tile__media,.bon-tiles--radius-md .bon-tile{border-radius:.5rem}
.bon-tiles--radius-lg .bon-tile__media,.bon-tiles--radius-lg .bon-tile{border-radius:.75rem}
.bon-tiles--radius-xl .bon-tile__media,.bon-tiles--radius-xl .bon-tile{border-radius:1rem}
.bon-tile{display:block;text-decoration:none;color:inherit;overflow:hidden;border:1px solid rgba(0,0,0,.06);background:#fff}
.bon-tile__media{width:100%;background:#F1F5F9;display:flex;align-items:center;justify-content:center}
.bon-tile__media img{width:100%;height:100%;object-fit:cover;display:block}
.bon-tile__caption{padding:.5rem .75rem;border-top:1px solid rgba(0,0,0,.06);font-size:.9rem;line-height:1.2}
.bon-tile__line1{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bon-tile__line2{opacity:.8}
.bon-tiles--children{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin:.5rem 0 1rem}
.bon-tile--child .bon-tile__media{aspect-ratio:1/1}
@media (prefers-reduced-motion:no-preference){
  .bon-tile{transition:transform .15s ease, box-shadow .15s ease}
  .bon-tile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
}