.root {
    margin-top: 64px;

    h2 {
        font-size: 23px;
        font-weight: 600;
        line-height: 1;
        margin: 0 0 20px;
        color: var(--rp-c-text-1);
        transition: color 0.5s;
    }

    a {
        letter-spacing: -0.01em;
        margin-bottom: 1em;
        transition: color 0.5s;
        margin: 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 2.2;
        margin-top: 8px;
        color: var(--rp-c-text-code);
        opacity: 0.9;
        transition: color 0.5s;
        word-break: break-all;
    }

    a:hover {
        transition: color 0.5s;
        color: var(--rp-c-brand-dark);
    }
}

.group {
    break-inside: avoid;
    margin-bottom: 28px;
    background-color: var(--rp-c-bg-soft);
    border-radius: 12px;
    padding: 28px 32px;
    transition: background-color 0.5s;
}

.list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.npm {}

@media (max-width: 768px) {
    .root a {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .root {
        columns: 2;
        min-width: 648px;
    }
}

@media (min-width: 1024px) {
    .root {
        columns: 3;
        min-width: 904px;
    }
}