.tab-pane.show.active .productBoxesInner {
    padding: 0 15px
}

.productBoxesInner {
    width: 100%;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    grid-template-rows: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}

/* Pattern for every 9 items */
.productBoxesInner > .box:nth-child(9n+1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
}
.productBoxesInner > .box:nth-child(9n+4) {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
}
.productBoxesInner > .box:nth-child(9n+5) {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}
.productBoxesInner > .box:nth-child(9n+2) {
    grid-column: 3 / span 1;
    grid-row: 1 / span 2;
}
.productBoxesInner > .box:nth-child(9n+3) {
    grid-column: 4 / span 1;
    grid-row: 1 / span 1;
}
.productBoxesInner > .box:nth-child(9n+6) {
    grid-column: 4 / span 1;
    grid-row: 2 / span 1;
}
.productBoxesInner > .box:nth-child(9n+7) {
    grid-column: 1 / span 2;
    grid-row: 3 / span 1;
}
.productBoxesInner > .box:nth-child(9n+8) {
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
}
.productBoxesInner > .box:nth-child(9n+9) {
    grid-column: 4 / span 1;
    grid-row: 3 / span 1;
}

@media screen and (max-width: 800px) {
    .productBoxesInner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        grid-gap: 0;
    }
    .productBoxesInner > .box {
        width: calc(50% - 20px);
        max-width: 300px;
        margin: 0 10px 20px;
    }
}
@media screen and (max-width: 440px) {
    .productBoxesInner > .box {
        width: 100%;
        margin: 0 0 20px;
    }
}