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

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

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

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

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

.productsHoneyData .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;
}

.productsHoneyData .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%);
}

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

.productsHoneyData .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%);
}

.productsHoneyData .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%);
}

.productsHoneyData .item A h1 {
    font-size: 14px;
    font-weight: bolder;
    margin-top: 36%;
    color: black;
}

@supports (display: grid) {
    @media (min-width: 17rem) {
        .productsHoneyData {
            display: grid;
            max-width: 15rem;
            grid-template-columns: repeat(3, 5rem);
        }
        .productsHoneyData .item {
            grid-column: span 2;
            margin: 0;
            /* reset */
            margin-bottom: -1.4rem;
            /* shifting up the items in the next row */
        }
        .productsHoneyData .item:nth-child(even) {
            grid-column: 2
        }
    }
    @media (min-width: 22rem) {
        .productsHoneyData {
            max-width: 20rem;
            grid-template-columns: repeat(4, 5rem);
        }
        .productsHoneyData .item:nth-child(3n+1) {
            grid-column: 1
        }
        .productsHoneyData .item:nth-child(3n+2) {
            grid-column: 3
        }
        .productsHoneyData .item:nth-child(3n+0) {
            grid-column: 2
        }
    }
    @media (min-width: 32rem) {
        .productsHoneyData {
            max-width: 30rem;
            grid-template-columns: repeat(6, 5rem);
        }
        .productsHoneyData .item:nth-child(5n+1) {
            grid-column: 1
        }
        .productsHoneyData .item:nth-child(5n+2) {
            grid-column: 3
        }
        .productsHoneyData .item:nth-child(5n+3) {
            grid-column: 5
        }
        .productsHoneyData .item:nth-child(5n+4) {
            grid-column: 2
        }
        .productsHoneyData .item:nth-child(5n+0) {
            grid-column: 4
        }
    }
    @media (min-width: 42rem) {
        .productsHoneyData {
            max-width: 40rem;
            grid-template-columns: repeat(8, 5rem);
        }
        .productsHoneyData .item:nth-child(7n+1) {
            grid-column: 1
        }
        .productsHoneyData .item:nth-child(7n+2) {
            grid-column: 3
        }
        .productsHoneyData .item:nth-child(7n+3) {
            grid-column: 5
        }
        .productsHoneyData .item:nth-child(7n+4) {
            grid-column: 7
        }
        .productsHoneyData .item:nth-child(7n+5) {
            grid-column: 2
        }
        .productsHoneyData .item:nth-child(7n+6) {
            grid-column: 4
        }
        .productsHoneyData .item:nth-child(7n+0) {
            grid-column: 6
        }
    }
    @media (min-width: 54rem) {
        .productsHoneyData {
            max-width: 50rem;
            grid-template-columns: repeat(10, 5rem);
        }
        .productsHoneyData .item:nth-child(9n+1) {
            grid-column: 1
        }
        .productsHoneyData .item:nth-child(9n+2) {
            grid-column: 3
        }
        .productsHoneyData .item:nth-child(9n+3) {
            grid-column: 5
        }
        .productsHoneyData .item:nth-child(9n+4) {
            grid-column: 7
        }
        .productsHoneyData .item:nth-child(9n+5) {
            grid-column: 9
        }
        .productsHoneyData .item:nth-child(9n+6) {
            grid-column: 2
        }
        .productsHoneyData .item:nth-child(9n+7) {
            grid-column: 4
        }
        .productsHoneyData .item:nth-child(9n+8) {
            grid-column: 6
        }
        .productsHoneyData .item:nth-child(9n+0) {
            grid-column: 8
        }
    }
}