#fn-list {
    padding: 0;
    list-style: none;
    text-align: left;
}

.fn-item {
    width: 322px; /* 300px + 10px * 2 + 1px * 2 */
    margin: 0 8px 16px;
    padding: 10px;
    border: solid gray 1px;
    border-radius: 1em;
    display: inline-block;
    text-align: center;
    transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
}

.fn-item:hover {
    transform: translateY(-3px);
    box-shadow: 2px 2px 2px lightgray;
}

.fn-item-title {
    margin: 0;
    color: var(--th-pre-clr);
    letter-spacing: 5px;
    transition: color 300ms ease-in-out;
}

.fn-item:hover .fn-item-title {
    color: var(--th-aft-clr);
}

.fn-item-desc {
    height: 3em;
    text-align: left;
}

.fn-item-btn {
    font-size: 1em;
}

.fn-item-info {
    display: none;
}

#example-fn {
    display: none;
}