.ati-wrap {
    width: 100%;
}

.ati-heading {
    font-size: 1.35em;
    font-weight: 700;
    margin: 0 0 1rem;
}

.ati-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-gap: 2rem;
}

.ati-columns-1 { columns: 1; }
.ati-columns-2 { columns: 2; }
.ati-columns-3 { columns: 3; }
.ati-columns-4 { columns: 4; }
.ati-columns-5 { columns: 5; }
.ati-columns-6 { columns: 6; }

.ati-tag-item {
    break-inside: avoid;
    margin: 0 0 .55rem;
}


.ati-tag-link-wrap {
    position: relative;
    display: inline-block;
}

.ati-tag-link,
.ati-tag-link:hover,
.ati-tag-link:focus,
.ati-tag-link:visited {
    text-decoration: none !important;
}

.ati-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + .55rem);
    z-index: 9999;
    width: max-content;
    max-width: min(320px, 80vw);
    padding: .55rem .7rem;
    border-radius: 6px;
    background: rgba(25, 25, 25, .96);
    color: #fff;
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.ati-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(25, 25, 25, .96);
}

.ati-tag-link-wrap:hover .ati-tooltip,
.ati-tag-link-wrap:focus-within .ati-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ati-count {
    opacity: .65;
    margin-left: .25rem;
}

.ati-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(127,127,127,.25);
}

.ati-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .55rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
}

.ati-active {
    font-weight: 800;
    text-decoration: underline;
}

.ati-disabled {
    opacity: .3;
    cursor: default;
}

.ati-message {
    margin: 0;
}

@media (max-width: 900px) {
    .ati-columns-4,
    .ati-columns-5,
    .ati-columns-6 { columns: 3; }
}

@media (max-width: 700px) {
    .ati-columns-2,
    .ati-columns-3,
    .ati-columns-4,
    .ati-columns-5,
    .ati-columns-6 { columns: 2; }
}

@media (max-width: 480px) {
    .ati-tag-list { columns: 1 !important; }
    .ati-letter-nav { gap: .35rem; }
    .ati-letter { min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem; }
}