.app{padding:5px}.app h1{font-size:30px}.alphabet-index-item{font-size:16px;font-weight:600;cursor:pointer;justify-content:center;display:flex;border:1px solid #ddd;margin:0 1px 2px 0;width:30px;height:30px;text-decoration:none;line-height:30px}.alphabet-index{display:flex;flex-wrap:wrap;gap:10px;padding:10px;text-transform:uppercase}.letter{background-color:#f0f0f0;padding:15px;border-radius:5px;cursor:pointer;transition:background-color .3s;text-align:center;width:40px;height:40px;line-height:40px;font-size:18px}.letter:hover{background-color:#e0e0e0}.active{background-color:#007bff;color:white}.container{gap:20px}.list-container{width:auto;padding:5px}.list-item{border-bottom:1px solid #ddd}.list-item a{font-size:18px;padding:10px 5px 5px;text-decoration:none;color:inherit;line-height:40px}.group-title{font-size:33px;font-weight:600;text-transform:uppercase}.group-title:after{content:"";width:calc(100% - 70px);height:1px;background-color:#dbdbdb}.group-items{padding:0;column-count:4}.group-items li{list-style-type:none}@media (min-width:1px){.group-items{column-count:1}}@media (min-width:576px){.group-items{column-count:2}}@media (min-width:768px){.group-items{column-count:3}}@media (min-width:1024px){.group-items{column-count:4}}