.hex-grid {
    --r: 0.15; /* control the radius [0 1] */
    --a: 30deg; /* control the rotation */
    --s: 152px; /* Hex size (you will need to manually update the container queries if this changes */
    --g: 18px; /* gap, not needed on horizontal */

    gap: var(--g) 0;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    max-width: 1260px;
    margin: auto;
    container-type: inline-size;
    padding: 0;
    margin-top: 24px;
    padding-top: calc(var(--s) * 0.25);
}

ul {
    list-style: none;
}

li {
    padding-left: 0;
}

.hex-item {
    margin-left: 0;
    background-color: #dcc086;
    width: var(--s);
    height: var(--s);
    aspect-ratio: 1;
    --_a: (30deg * var(--r));
    --_r: (50% * cos(30deg) / cos((30deg * (1 - var(--r)))));
    cursor: pointer;
    transition:
        --r 0.5s,
        --a 0.5s;
    /* Don't stare for too long at the below code */
    clip-path: shape(
        from calc(50% + var(--_r) * cos(var(--a) - var(--_a)))
            calc(50% + var(--_r) * sin(var(--a) - var(--_a))),
        curve to calc(50% + var(--_r) * cos(var(--a) + var(--_a)))
            calc(50% + var(--_r) * sin(var(--a) + var(--_a))) with
            calc(50% + 50% * cos(var(--a))) calc(50% + 50% * sin(var(--a))),
        line to calc(50% + var(--_r) * cos(60deg + var(--a) - var(--_a)))
            calc(50% + var(--_r) * sin(60deg + var(--a) - var(--_a))),
        curve to calc(50% + var(--_r) * cos(60deg + var(--a) + var(--_a)))
            calc(50% + var(--_r) * sin(60deg + var(--a) + var(--_a))) with
            calc(50% + 50% * cos(60deg + var(--a)))
            calc(50% + 50% * sin(60deg + var(--a))),
        line to calc(50% + var(--_r) * cos(120deg + var(--a) - var(--_a)))
            calc(50% + var(--_r) * sin(120deg + var(--a) - var(--_a))),
        curve to calc(50% + var(--_r) * cos(120deg + var(--a) + var(--_a)))
            calc(50% + var(--_r) * sin(120deg + var(--a) + var(--_a))) with
            calc(50% + 50% * cos(120deg + var(--a)))
            calc(50% + 50% * sin(120deg + var(--a))),
        line to calc(50% + var(--_r) * cos(180deg + var(--a) - var(--_a)))
            calc(50% + var(--_r) * sin(180deg + var(--a) - var(--_a))),
        curve to calc(50% + var(--_r) * cos(180deg + var(--a) + var(--_a)))
            calc(50% + var(--_r) * sin(180deg + var(--a) + var(--_a))) with
            calc(50% + 50% * cos(180deg + var(--a)))
            calc(50% + 50% * sin(180deg + var(--a))),
        line to calc(50% + var(--_r) * cos(240deg + var(--a) - var(--_a)))
            calc(50% + var(--_r) * sin(240deg + var(--a) - var(--_a))),
        curve to calc(50% + var(--_r) * cos(240deg + var(--a) + var(--_a)))
            calc(50% + var(--_r) * sin(240deg + var(--a) + var(--_a))) with
            calc(50% + 50% * cos(240deg + var(--a)))
            calc(50% + 50% * sin(240deg + var(--a))),
        line to calc(50% + var(--_r) * cos(300deg + var(--a) - var(--_a)))
            calc(50% + var(--_r) * sin(300deg + var(--a) - var(--_a))),
        curve to calc(50% + var(--_r) * cos(300deg + var(--a) + var(--_a)))
            calc(50% + var(--_r) * sin(300deg + var(--a) + var(--_a))) with
            calc(50% + 50% * cos(300deg + var(--a)))
            calc(50% + 50% * sin(300deg + var(--a)))
    );
    align-content: center;
    justify-items: center;
    padding: 0;
    margin: auto;
}

.hex-item--in-memoriam {
    background-image: url("../images/heart-gold.svg");
    background-size: 98px;
    background-position: top 35px center;
    background-repeat: no-repeat;
}

.hex-item__entry {
    text-align: center;
    margin: auto;
    padding: calc(var(--s) * 0.21) calc(var(--s) * 0.14);
    color: #05142c;
    word-break: break-word;

    /* Button styling override */
    display: flex;
    background-color: transparent;
    border: 0;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.hex-item:nth-child(even) {
    background-color: #232f62;

    .hex-item__entry {
        color: #fff5e5;
    }

    &.hex-item--in-memoriam {
        background-image: url("../images/heart-blue.svg");
    }
}

/* Move hexagons into available space above */
@container (min-width: 456px) {
    .hex-item {
        margin: unset;
        margin-top: calc(var(--s) * -0.25);
    }
}

/* Breakpoint for 3 and 2 hexes per row */
@container (min-width: 456px) and (max-width: 531px) {
    .hex-item:nth-child(5n + 4) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint for 3 and 3 hexes per row */
@container (min-width: 532px) and (max-width: 607px) {
    .hex-item:nth-child(6n + 4) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint for 4 and 3 hexes per row */
@container (min-width: 608px) and (max-width: 683px) {
    .hex-item:nth-child(7n + 5) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint for 4 and 4 hexes per row */
@container (min-width: 684px) and (max-width: 759px) {
    .hex-item:nth-child(8n + 5) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint where exactly 5 and 4 hexes per row */
@container (min-width: 760px) and (max-width: 835px) {
    .hex-item:nth-child(9n + 6) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint where 5 and 5 hexes fit per row */
@container (min-width: 836px) and (max-width: 911px) {
    .hex-item:nth-child(10n + 6) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint where exactly 6 and 5 hexes fit per row */
@container (min-width: 912px) and (max-width: 987px) {
    .hex-item:nth-child(11n + 7) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint where exactly 6 and 6 hexes fit per row */
@container (min-width: 988px) and (max-width: 1063px) {
    .hex-item:nth-child(12n + 7) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint where exactly 7 and 6 hexes fit per row */
@container (min-width: 1064px) and (max-width: 1139px) {
    .hex-item:nth-child(13n + 8) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint where exactly 7 and 7 hexes fit per row */
@container (min-width: 1140px) and (max-width: 1215px) {
    .hex-item:nth-child(14n + 8) {
        margin-left: calc(var(--s) / 2);
    }
}

/* Breakpoint where exactly 8 and 7 hexes fit per row */
@container (min-width: 1216px) {
    .hex-item:nth-child(15n + 9) {
        margin-left: calc(var(--s) / 2);
    }
}

.hex-item__entry-modal {
    min-width: 250px;
    max-width: 90%;
    border: unset;
    text-align: center;
    padding: 24px;
    padding-top: 52px;

    @media (min-width: 720px) {
        padding: 52px;
    }

    .hex-item__entry-name {
        font-size: 24px;
        color: #000;
        margin-bottom: 12px;
    }

    .hex-item__entry-amount {
        font-weight: 700;
        font-size: 32px;
        margin-bottom: 0 !important;

        @media (min-width: 720px) {
            font-size: 48px;
        }
    }

    .hex-item__entry-close {
        width: 42px;
        height: 42px;
        background-color: #082c65;
        background-image: url("../images/close-x.svg");
        background-size: 19px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 4px;
        right: 4px;
        border: unset;
        cursor: pointer;

        &:hover {
            outline: 2px solid #ffe3ac;
            box-shadow: inset 0 0 0 3px #000;
        }

        &:focus-visible {
            outline: 3px solid #000;
            box-shadow: inset 0 0 0 2px #ffe3ac;
        }
    }
}