.mcircs{margin:0;grid-column:1/-1;width:100%}
.mcircs__title{margin:0 0 1.6rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(18,18,17,.4)}
.mcircs__list{display:flex;flex-wrap:wrap;gap:1.5rem;margin:0;padding:0;list-style:none}
.mcircs__list>li{list-style:none}
.mcirc{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:7.5rem;color:inherit;text-decoration:none}
.mcirc__disc{position:relative;display:block;width:6.5rem;height:6.5rem;border-radius:50%;background:#E6E3DD;overflow:hidden;transition:background-color .45s cubic-bezier(.23,1,.32,1)}
.mcirc__disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;transition:transform .7s cubic-bezier(.23,1,.32,1)}
.mcirc__label{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;text-align:center;line-height:1.35;color:rgba(18,18,17,.7);transition:color .3s}
@media (hover:hover) and (pointer:fine){
  .mcirc:hover .mcirc__disc{background:#DBD7CF}
  .mcirc:hover .mcirc__disc img{transform:scale(1.07)}
  .mcirc:hover .mcirc__label{color:rgba(18,18,17,1)}
}
.mcirc:focus-visible{outline:none}
.mcirc:focus-visible .mcirc__disc{box-shadow:0 0 0 2px rgba(18,18,17,.55)}
.mcircs--scroll{margin:0 0 1.6rem}
.mcircs--scroll .mcircs__list{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1rem;padding-bottom:.4rem}
.mcircs--scroll .mcircs__list::-webkit-scrollbar{display:none}
.mcircs--scroll .mcircs__list>li{scroll-snap-align:start;flex:0 0 auto}
.mcircs--scroll .mcirc{width:5.8rem}
.mcircs--scroll .mcirc__disc{width:5.2rem;height:5.2rem}
.mcircs--scroll .mcirc__label{font-size:.6rem;letter-spacing:.07em}
@media (prefers-reduced-motion:reduce){.mcirc__disc,.mcirc__disc img,.mcirc__label{transition-duration:.01ms}}