.variant-pill,
.variant-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;
    font-size: 11px;
    font-weight: 700;
}

.variant-pill {
    color: #dce8ff;
    border: 1px solid #4a628b;
    background: #263754;
}

.variant-tag {
    color: #ffe998;
    border: 1px solid #685a2b;
    background: #3b341d;
}

.hunter-button:disabled,
input:disabled,
select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.binder-catalog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    align-content: start;
    gap: 10px;
}

.binder-catalog-card {
    min-height: 138px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    gap: 10px 16px;
    border: 1px solid #303b56;
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
        #181f31;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 5px 14px rgba(0,0,0,.18);
}

.binder-catalog-card h2 {
    margin: 3px 0 4px;
    color: #fff;
    font-size: 18px;
}

.binder-set-era {
    color: #8da1c7;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.binder-set-code {
    color: #8190ac;
    font-size: 12px;
}

.binder-set-stats {
    align-self: start;
    color: #ffda4c;
    font-size: 12px;
    font-weight: 700;
}

.binder-open-link {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

@media (max-width: 760px) {
    .binder-catalog-list {
        grid-template-columns: 1fr;
    }
}