.card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
box-shadow: 0 0 2px rgba(0, 0, 0, .14);
text-align: center;
text-decoration: none;
color: var(--text-color);
width: var(--card-width);
height: var(--card-height);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
position: relative;
outline: 3px solid transparent;
overflow: hidden;
}
.card:hover, .card:hover .card-content {
border-color: var(--hover-border);
}
.card:focus {
outline: none;
}
.card:focus-visible,
.card[aria-selected="true"] {
background-color: var(--card-content-bg);
outline: 3px solid var(--focus-outline);
text-decoration: underline;
text-decoration-thickness: 3px;
}
.card-icon {
height: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.card img {
width: var(--icon-size);
height: var(--icon-size);
}
.card-content {
height: 50%;
width: 100%;
padding: 16px;
box-sizing: border-box;
background-color: var(--card-content-bg);
border-top: 1px solid var(--border-color);
}
.card h2 {
margin: 0;
font-size: var(--font-size);
line-height: 1.4;
color: var(--text-color);
text-align: left;
}