.hex-map {
    display: grid;

    --grid-size: 150px;

    grid-template-rows: repeat(100, calc(var(--grid-size) * 0.43));

    height: 100vh;
}

.hex-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--grid-size)); 
    grid-auto-flow: column;
    justify-content: center;

    gap: 0px calc(var(--grid-size) * 0.45);
}

.hex-row > div {
    width: var(--grid-size);
    height: calc(var(--grid-size) * 0.9);

    position: relative;
}

.hex-row > div > * {
    width: inherit;
    height: inherit;
    position: absolute;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    height: 100%;
}
.hex-row > div > *:not(img:first-child) {
    pointer-events: none;
    transition: all .1s !important;
    transform: scale(1);
}
.hex-row > div:not(.discovered) > *:not(img:first-child):not(h3) {
    transform: scale(0);
}
.hex-row > div:not(.discovered) > * {
    filter: brightness(90%) !important;
}

.hex-row > div {
    cursor: pointer;
    transition: .2s;
}
.hex-row > div:hover {
    transform: scale(.9);
    transition: .05s;
}

.hex-row > div > img:active,
.hex-row > div > img.active {
    transform: scale(.9);
    transition: .05s;
}


.hex-info {
    display: grid;
    justify-content: center;

    position: fixed;
    bottom: 0;
    height: 0;

    background-color: white;
    border: 5px solid transparent;

    width: fit-content;

    text-align: center;

    transition: .2s;
}

.hex-info.active {
    border: 5px solid var(--border-color);
    border-radius: 5px;
    height: fit-content;
    padding: 20px;

    filter: drop-shadow(0px -5px 4px rgba(0, 0, 0, .4));
}

@media only screen and (max-width: 600px) {
    .hex-map {
      --grid-size: 60px;
      font-size: .5em;
    }
}

.hex-info table {
    border-spacing: 0;
    border: 2px solid var(--border-color);
    border-radius: 11px;
}

.hex-info th,
.hex-info td {
    border: 2px solid var(--border-color);
    padding: 10px;
}