* {
    margin: 0;
    padding: 0;
    border: 0;
}

:root {
    --hex-size: 100px; /* radius from center to corner */
    --border-width: 2px;
    --default-color: #6c6;
}

.hex {
    margin: var(--border-width);
    position: relative;
}

/*.hex:before, .hex:after {*/
/*    content: "";*/
/*    border-top: calc(0.866 * var(--hex-size)) solid transparent;*/
/*    border-bottom: calc(0.866 * var(--hex-size)) solid transparent;*/
/*    position: absolute;*/
/*}*/

.hex-grid {
    display: flex;
}

.hex-column:first-child {
    margin-left: 0;
}

.hex-column {
    width: calc(2 * var(--hex-size));
    margin-left: calc(-0.866 / 2 * var(--hex-size));
}

.hex-column.even {
    margin-top: calc(0.866 * var(--hex-size) + 0.5 * var(--border-width));
}