.hexagon {
    width: 100px;
    height: 57.735px;
    background: var(--hexagon);
    position: relative;
    transform: rotate(90deg);
    z-index: -1;
}

.hexagon::before {
    content: "";
    position: absolute;
    top: -28.8675px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 28.8675px solid var(--hexagon);
}

.hexagon::after {
    content: "";
    position: absolute;
    bottom: -28.8675px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 28.8675px solid var(--hexagon);
}

/* @media screen and (min-width:320px) { */
    .hexagon.xl {
        width: 212px;
        height: 122.3876px;
    }
    .hexagon.xl::before {
        top: -61.1991px;
        border-left: 106px solid transparent;
        border-right: 106px solid transparent;
        border-bottom: 61.1991px solid var(--hexagon);
    }
    .hexagon.xl::after {
        bottom: -61.1991px;
        border-left: 106px solid transparent;
        border-right: 106px solid transparent;
        border-top: 61.1991px solid var(--hexagon);
    }
/* } */

@media screen and (min-width:728px) {
    .hexagon.xl {
        width: 340px;
        height: 196.299px;
    }
    .hexagon.xl::before {
        top: -98.1495px;
        border-left: 170px solid transparent;
        border-right: 170px solid transparent;
        border-bottom: 98.1495px solid var(--hexagon);
    }
    .hexagon.xl::after {
        bottom: -98.1495px;
        border-left: 170px solid transparent;
        border-right: 170px solid transparent;
        border-top: 98.1495px solid var(--hexagon);
    }
}