.list-grid{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem;
}






.field-name{
    font-size: .9rem;
}
.field-value{
    font-weight: 600;
    font-size: 1rem;
    
}

.field-value-emphasis{
    font-weight: 800;
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.field-name-emphasis{
    font-size: 1rem;
}

.page-number{
    color:black;
    background: white;
    padding: .25em;
    min-height: 30px;
    height:auto;
    margin: .5rem;
    transition-property: transform;
    text-align: left;
    font-size: 1rem;
    
    /* border-bottom: 2px solid green; */
    border: 1px solid lightgrey;
    border-radius: var(--border-radius);
    -webkit-transform-origin: top;
    -moz-animation: fadein 200ms; /* Firefox */
    -webkit-animation: fadein 200ms; /* Safari and Chrome */
    -o-animation: fadein 200ms; /* Opera */
    width: 2.5em;
    
}

.total-page-number{
    color: black;
    font-weight: bold;
}

.field-flip{
    
}
.list-card {
    min-height: 5rem;
    min-width: 4rem;
    margin: 0;
    padding: 1rem;
    background-color: var(--bg-element);
    border-radius: var(--border-radius);
    
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: left;
    position: relative;
    z-index: 1;
    box-shadow: var(--box-shadow2);
    transition: all 0.3s ease-out;
    text-decoration: none;
}

.list-card:hover {
    transform: translateY(-5px) scale(1.005) translateZ(0);
    box-shadow: var(--highlight-box-shadow)
}

.list-card:hover .overlay {
    transform: scale(4) translateZ(0);
}



.card-flip {
    flex-flow: wrap;
    justify-content: right;
    flex-direction: row-reverse;
    gap: 1rem;
}