.rel-grid {
    grid-auto-rows: clamp(240px, 22vw, 340px);
}

.rel-tags {
        margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rel-tag {
        font-family: var(--font-mono);
    font-size: var(--fs-label-m);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 11px 18px;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition:
        border-color 0.2s,
        color 0.2s;
}

.rel-tag:hover {
        border-color: var(--ink);
    color: var(--ink);
}

.rel-tag.rel-all {
        color: var(--accent-deep);
    border-color: var(--accent);
}

@media (max-width: 960px) {
    .rel-grid {
        grid-auto-rows: clamp(240px, 22vw, 340px);
    }
}

@media (max-width: 640px) {
    .rel-tags {
        gap: 6px;
    }

    .rel-tag {
        padding: 9px 14px;
    }
}