*,
*::before,
*::after {
    box-sizing: border-box;
}

.grid {
    display: flex;
    flex-direction: column;
}

.col-2 {

    .box ul {
        margin-inline: -1rem;
        margin-block-end: -1.1rem;
    }
}

.box {
    background-color: var(--secondary);

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        padding: 0.5rem;
        margin-block-end: 0.1rem;
        outline: var(--box-border-radius) solid var(--border);

        text-align: center;
    }

    li div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    h2,
    h3 {
        margin-block-start: 0;
    }
}

.corner-only {
    --s: 1rem;
    border: 3px solid var(--border);
    padding: 0.75rem;
    height: 100%;
    width: 100%;

    mask:
        conic-gradient(#000 0 0) content-box,
        conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s));
}

@media (min-width: 46rem) {
    .box li div {
        display: flex;
        flex-direction: unset;
        justify-content: space-between;
    }

    .col-2 {
        display: flex;
        flex-direction: row;
        /* flex-grow: 1; */

        >div {
            width: 50%;
        }
 
        ul {
            display: flex;
            flex-direction: column;
            flex-grow: 3;

        }
    }
}

@media (min-width: 75rem) {}