.order-card {
    align-items: center;
    background-color: var(--spruce-base-color-background);
    border: 1px solid var(--spruce-base-color-border);
    border-radius: 0.925rem;
    color: var(--spruce-base-color-heading);
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: clamp(1rem, 5vw, 1.5rem);
    text-decoration: none;
}
.card-hoverable {
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.3s, border-color 0.3s;
}

.card-hoverable:hover {
    border-color: transparent;
    box-shadow: 0 1px 2px -2px rgba(92, 23, 212, 0.15),
    0 3px 6px 0 rgba(92, 31, 198, 0.12),
    0 5px 12px 4px rgba(101, 36, 214, 0.09);
}
.order-card__title {
    font-size: clamp(1.0625rem, 2vw + 1rem, 1.25rem);
}
.order-card__link {
    color: var(--spruce-base-color-heading);
    text-decoration: none;
}
.order-card__link:hover, .order-card__link:focus {
    color: var(--spruce-base-color-primary);
}
.order-card__data > * {
    margin-block-end: 0;
    margin-block-start: 0;
}
.order-card__data > * + * {
    margin-block-start: 0.5rem;
}
.order-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

/* TODO: use code below for self-made mentions */

/*.atwho-container {*/
/*    position: absolute;*/
/*    z-index: 9999;*/
/*    font-family: Arial, sans-serif;*/
/*    font-size: 14px;*/
/*}*/

/*.atwho-view {*/
/*    display: none;*/
/*    position: absolute;*/
/*    background: #fff;*/
/*    border: 1px solid #ddd;*/
/*    border-radius: 4px;*/
/*    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    list-style: none;*/
/*    z-index: 9999;*/
/*}*/

/*.atwho-view-ul {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

/*.atwho-view-ul li {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    padding: 8px 12px;*/
/*    cursor: pointer;*/
/*}*/

/*.atwho-view-ul li img {*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    border-radius: 50%;*/
/*    margin-right: 8px;*/
/*}*/

/*.atwho-view-ul li span {*/
/*    font-weight: bold;*/
/*}*/

/*.atwho-view-ul li.cur,*/
/*.atwho-view-ul li:hover {*/
/*    background-color: #4caf50;*/
/*    color: #fff;*/
/*}*/