.barnd-container{grid-template-columns:repeat(auto-fill,minmax(134px,1fr));justify-items:center;gap:12px;display:grid}.barnd-container .brands-box{color:#333;background:#fff;border:1px solid #eee;border-radius:15px;flex-direction:column-reverse;align-items:center;width:100%;padding:8px 0;transition:box-shadow .2s ease-in;display:flex}@media (width>=1024px){.barnd-container .brands-box:hover{box-shadow:1px 1px 65px -32px #0000004d}}.barnd-container .brands-box .name{text-overflow:ellipsis;white-space:nowrap;text-align:center;width:100%;font-size:var(--f3);padding:0 5px;display:block;overflow:hidden}.brands-letter{color:var(--color-titr);cursor:pointer;text-align:center;background:#fff;border:1px solid #0000000d;border-radius:12px;width:40px;height:40px;padding:10px;font-weight:700;transition:all .3s}.brands-letter:hover{background:var(--color-primary);color:#fff!important}.brands-letter.active{border-color:var(--color-primary);color:var(--color-primary);transition:all 1s ease-in-out}@media (width>=640px){.barnd-container{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.barnd-container .brands-box{width:100%}.barnd-container .brands-box .name{font-size:var(--f6)}}@media (width>=768px){.barnd-container .brands-box .name{font-size:var(--f3)}}