.auto-cols-max-fr {
    grid-template-columns: max-content 1fr;
}

.auto-cols-max-fr-max {
    grid-template-columns: max-content 1fr max-content;
}

.auto-cols-fr-max {
    grid-template-columns: 1fr max-content;
}

.auto-cols-fr-min {
    grid-template-columns: 1fr min-content;
}

.auto-cols-fr-auto {
    grid-template-columns: 1fr auto;
}

/** Hexagon stuff **/

.hexagon-container {
    --s: 150px; /* control the size */
    --g: 10px; /* control the gap */
    display: grid;
    margin: calc(var(--s) + var(--g));
}

.hexagon-container > .hexagon {
    grid-area: 1/1;
    width: var(--s);
    aspect-ratio: 1.15;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
    /*transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));*/
}

.hexagon-container > .hexagon:hover {
    --_t: 1.2;
    z-index: 1;
}