body {
    --cl-primary: #db7000;
    --cl-secondary: #dbb085;
}


.cards {
    display: flex;
    gap: 2em;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 2em;
}

.other-color {
    --cl-primary: #1f8f7a;
    --cl-secondary: #74bfb1;
}

/* .cards > a:hover { */
/*     background: none; */
/* } */

a.dataset {
    flex: 1 1 200px;
/*     max-width: 250px; */
    height: fit-content;
    border-left: 10px var(--cl-primary) solid;
    border-radius: 2px;
    padding: 0.5em;
    transition: transform .2s;
    text-decoration: none;
    color: inherit;
}

a.dataset:hover {
    transform: scale(1.02);
    box-shadow: 10px 5px 5px #eee;
    background: var(--cl-primary);
    color: white;
    border-color: var(--cl-secondary);
    text-shadow: none;
}

a.dataset > div {
    padding: none;
}

a.dataset * {
    font-size: "smaller";
}

.data__doi {
    color: #666666;
    margin-left: auto;
    display: flex;
}

.data__doi span {
    margin-left: auto;
    margin-top: 0.3em;
}

.data__title {
    color: var(--cl-primary);
    font-weight: bold;
}

a.dataset:hover .data__title, a.dataset:hover .data__doi {
    color: white;
}