main .container {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

main .card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: solid 2px var(--card-bg);
    border-radius: 8px;
    font-size: 17px;
    color: var(--subtext);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

main .card:hover {
    color: var(--text);
    border: solid 2px var(--card-bg-hovered);
}

main .card svg {
    width: 22px;
    height: 22px;
    fill: var(--subtext);
    transition: fill 0.2s ease;
}

main .card:hover svg {
    fill: var(--text);
}