.choice-grid{--cols:var(--cols-s, 3);--gap-col:1rem;--gap-row:1.5rem;--pad-x:0rem;--tile-max:10rem;align-content:flex-start;display:flex;flex-wrap:wrap;gap:var(--gap-row) var(--gap-col);justify-content:center;margin:0 auto;max-width:calc(var(--cols) * var(--tile-max) + (var(--cols) - 1) * var(--gap-col) + 2 * var(--pad-x));padding:0 var(--pad-x);width:100%}
@media (min-width: 600px){
.choice-grid{--gap-col:1.5rem;--gap-row:2rem}
}
@media (min-width: 768px){
.choice-grid{--cols:var(--cols-m, 3)}
}
@media (min-width: 1024px){
.choice-grid{--cols:var(--cols-l, 5);--gap-col:1.75rem;--tile-max:11rem}
}

.choice-grid li{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap-col)) / var(--cols));max-width:var(--tile-max);min-width:0}
.choice-grid a{align-items:center;display:flex;flex-direction:column;gap:0.625rem;text-align:center}
.choice-grid a > div{aspect-ratio:1 / 1;background-color:var(--color-surface);border:4px solid var(--color-surface);border-radius:50%;box-shadow:0 8px 16px rgb(0 0 0 / 0.06);overflow:hidden;position:relative;transition:border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);width:100%}
.choice-grid img{height:100%;inset:0;object-fit:cover;position:absolute;transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);width:100%}
.choice-grid a:hover > div{border-color:var(--color-primary-border-soft);box-shadow:0 12px 24px var(--color-primary-shadow-soft);transform:translateY(-6px) scale(1.05)}
.choice-grid a:hover img{transform:scale(1.15)}
.choice-grid a:active > div{box-shadow:var(--shadow-xs);transform:scale(0.95)}
.choice-grid span{font-size:0.8125rem;font-weight:var(--font-weight-ui);line-height:1.2;min-height:2lh;transition:color 0.2s ease}
@media (min-width: 480px){
.choice-grid span{font-size:0.9375rem}
}

.choice-grid a:hover span{color:var(--color-primary-dark)}