.hexagon {
    height: 2.4rem; /* adjust to control the size  */
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
    background: var(--color-base);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hexagon.r-90 {
    aspect-ratio: cos(30deg);
    clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
}