.span-4-cols {
    grid-column: 1 / span 4;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    row-gap: 1rem;

    padding: 1rem;

    background-color: var(--gov-color-secondary-300);
    /*border: solid 2px #f8f9fc;*/
    border-radius: 3px;
    /*box-shadow: var(--gov-box-shadow-m);*/
}

.card-title {
    height: 2lh;
}

.card-title a:focus strong {
    outline: 2px solid var(--gov-color-focus-base);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.card-title a strong {
    display: block;
    text-align: center;

    font-size: 18px;
}

.card-list ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;

    padding: 0;
}

.card-list li {
    /*box-shadow: var(--gov-box-shadow-s);*/
    /*border: solid 2px #eaedf3;*/
    border-radius: 6px;
    background-color: var(--gov-color-neutral-white);
    border: 1px solid var(--gov-color-secondary-400);

    margin: 0;
}

/* hide all but first 3 */
.card-list li:nth-child(n + 4) {
    display: none;
}

/* hide all show more buttons */
.card-list li:last-child {
    display: none;
}

/* display show more button if there are more than 5 or more election dates */
.card-list li:nth-child(n + 5):nth-last-child(n + 2) ~ :last-child {
    display: block;
}

.card-list li a {
    display: block;
    text-align: center;

    width: 100%;

    padding: 0.25rem;
}

.card-list li button {
    width: 100%;
    height: 100%;

    background: none !important;
    border: none;
    cursor: pointer;

    padding: 0.25rem;

    font-size: 1rem;
    font-family: var(--gov-font-family, "Roboto", sans-serif), sans-serif;
    color: var(--gov-color-primary);
    text-decoration: underline;
}

.card-list li button:hover {
    text-decoration: none;
}

.card-list li button:focus {
    outline: 2px solid var(--gov-color-focus-base);
    border-radius: 0.25rem;
}

/* disable list bullets (originating from gov-design) */
.card-list ul > li::before {
    display: none !important;
}