.article-bullet {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 8px;

    border: 3px solid black;
    padding: 16px;
    margin-top: 16px;

    color: black;
    text-decoration: none;
    cursor: pointer;

    transform: translate(0);

    transition: 
        color var(--anim-time) ease-out, 
        border-color var(--anim-time) ease-out,
        transform var(--anim-time) ease-out;
}

.article-bullet:hover {
    color: var(--header);
    border-color: var(--header);

    transform: translateX(16px);
}

.article-bullet hr {
    transition: border-color var(--anim-time) ease-out;
}


.article-bullet h2 {
    font-size: 26px;
}

.article-bullet p {
    margin: 0;
}

.article-bullet > div:not(:last-child) {
    flex-grow: 1;
}

.article-bullet > div:last-child {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    border-left: 2px solid black;
    padding-left: 8px;

    text-transform: uppercase;
    font-weight: bold;

    transition: border-color var(--anim-time) ease-out;
}

.article-bullet > div:last-child p {
    writing-mode: vertical-lr;
    text-orientation: upright;
}

.article-bullet > div:last-child p:last-child {
    font-size: 22px;
    margin-left: -5px;
}


.article-bullet:hover hr,
.article-bullet:hover > div:last-child
{
    border-color: var(--header);
}