.asg{margin:14px 0 18px}
.asg-title{margin:0 0 8px;font-size:.82rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.03em}
.asg-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.asg-item{flex:1 1 46px;max-width:64px;min-width:0;container-type:inline-size}
.asg-link{display:block;color:inherit;text-decoration:none}
.asg-img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:2px solid #e6e6e6;
  border-radius:6px;background:#fff;transition:border-color .15s ease}
.asg-img--missing{border-style:dashed;background:#f5f5f5}
.asg-label{display:block;margin-top:5px;font-size:.68rem;line-height:1.2;text-align:center;color:#555;
  overflow-wrap:anywhere}
@container (max-width:56px){.asg-label{font-size:.6rem;line-height:1.15}}
.asg-link:hover .asg-img,.asg-link:focus-visible .asg-img{border-color:#999}
.asg-link:hover .asg-label{text-decoration:underline}
.asg-item--active .asg-img{border-color:#222}
.asg-item--active .asg-label{color:#222;font-weight:700}
.asg-item--active .asg-link{cursor:default}
@media (max-width:575px){
  .asg{position:relative}
  .asg-list{gap:8px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:14px}
  .asg-list::-webkit-scrollbar{display:none}
  .asg-item{flex:0 0 54px;max-width:54px;scroll-snap-align:start}
  .asg::after{content:"";position:absolute;right:0;bottom:0;width:22px;height:100%;
    pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92))}
}