.cards {
    list-style: none;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
    align-items: stretch;

    &>li {
        display: contents;

        &>a {
            padding-inline: 1em;
            border-radius: 0.5em;
            background-color: var(--box);
            color: var(--fg);
            text-decoration: none;
            display: flex;
            justify-content: stretch;
            align-items: center;

            &:hover {
                background-color: var(--box-hover);
            }

            &>section {
                flex: 1 1;

                &>h3 {
                    margin-bottom: 0;
                }
            }
        }
    }
}