/* Index Styles */
ul.buttons {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 0.5em;

    li a {
        width: calc(100% - 24px);
        display: inline-block;
        border-radius: 8px;
        padding: 8px 12px;
        text-decoration: none;
        font-size: 0.9rem;
        background-color: color-mix(in srgb, var(--link), transparent 90%);
        color: var(--link);
        &:hover {
            background-color:  color-mix(in srgb, var(--link), transparent 80%);
        }
    }
}

@media only screen and (max-device-width: 667px) {
    ul.buttons {
        grid-template-columns: repeat(1, auto);
    }
}