CSS hexagon calculation

hexagon.css

:root {
  --hex-width: 150px;  
  --hex-background: #007593;
  --hex-color: white;
  --hex-height: calc(var(--hex-width) * 0.576923);
  --hex-small-border: calc(.5 * var(--hex-height));
  --hex-large-border: calc(.5 * var(--hex-width));
}

.hex {
    display: block;
    margin-bottom: 1em;
    padding: 1em;
    background: var(--hex-background);
    color: var(--hex-color);
    text-align: center;
    transition: transform .3s ease;

    @media (--min-s) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: var(--hex-small-border) 0;
        width: var(--hex-width);
        height: var(--hex-height);

        &:before {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 0;
            height: 0;
            border-right: var(--hex-large-border) solid transparent;
            border-bottom: var(--hex-small-border) solid var(--hex-background);
            border-left: var(--hex-large-border) solid transparent;
            content: " ";
        }

        &:after {
            position: absolute;
            top: 100%;
            left: 0;
            width: 0;
            border-top: var(--hex-small-border) solid var(--hex-background);
            border-right: var(--hex-large-border) solid transparent;
            border-left: var(--hex-large-border) solid transparent;
            content: "";
        }
    }
}