.metadata {
    display: flex;
    flex-direction: column;
    align-items: end;
    font-size: 0.9em;
    white-space: nowrap;
    margin-left: auto;
    min-width: 0;
    overflow: clip;
    flex-basis: 30%;
    flex-shrink: 2;

    .info {
        display: block;

        .time {
            display: inline-block;
            margin-right: 0.5em;
        }

        a.time {
            color: var(--font-color);
        }

        .visibility {
            display: inline-block;
            vertical-align: middle;
            font-size: 1rem;
        }
    }
    .instance {
        /*Left align so the right side is truncated*/
        align-self: start;
        /*Margin on the left so non truncated names are aligned to the right*/
        margin-left: auto;
        font-size: 0.9em;
        text-overflow: ellipsis;
        overflow: clip;
    }
}

@media (max-width: 1000px) {
    .metadata {
        flex-basis: 25%;
        
        .instance {
            display: none;
        }
    }
}