ul.tiles {
    display: grid;
    list-style: none;

    padding: 0;
    gap: 1em;

    grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
    grid-auto-flow: dense;

    li { display: grid; }

    > li > a {
        display: grid;
        padding: 0.5em 0.5em 0;
        align-content: space-between;
        text-align: center;

        background-color: var(--bg-accent-colour);
        border-radius: 1em;
        border: thick solid var(--main-colour);

        img {
            width: 100%;
            border-radius: 0.5em 0.5em 0 0;
        }
        h2 {
            font-size: 1em;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        h3 {
            padding-block: 0.5em;
            margin: 0;
        }
        sub { padding-bottom: 1em; }
    }:hover {
        border-color: var(--accent-colour);
    }
}