.productsHoneyDataTable {
    margin-top: 10% !important;
    max-width: 100rem !important;
    grid-template-columns: repeat(10, 10rem) !important;
}

.productsHoneyDataTable .item {
    width: 20rem !important;
    height: 19rem !important;
}

.productsHoneyDataTable IMG {
    width: 100%;
    display: block;
    height: 100%;
}

.productsHoneyDataTable {
    margin: 3rem auto;
    padding: 1rem 0 2.4rem;
    /*  background-color: gold; */
    text-align: center;
    max-width: 50rem;
}

.productsHoneyDataTable .item {
    width: 10rem;
    height: 10rem;
    position: relative;
    /* Default - simple fallback when no CSS Grid support */
    display: inline-block;
    margin: 0.4rem;
}

.productsHoneyDataTable .item::before {
    /* Goldenrod outline on the hexagon */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: goldenrod;
    clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    transform: scale(1.077);
    transition: transform 0.3s;
}

.productsHoneyDataTable .item::after {
    clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.productsHoneyDataTable .item:hover::before {
    transform: scale(1.154);
}

.productsHoneyDataTable .item A {
    background: whitesmoke;
    text-decoration: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*  background-image: See JS. */
    background-size: cover;
    background-position: center;
    clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.productsHoneyDataTable .item::after{
    clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.productsHoneyDataTable .item A h1 {
    font-size: medium;
    font-weight: bolder;
    margin-top: 36%;
    color: black;
}

.productsHoneyDataTable .item::after{
    clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}