.hb-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
    gap: 4rem !important;
}

.hb-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 4rem !important;

}

.hb-grid--3,
.has-hb-grid--3 .wp-block-group__inner-container:not(.wish-list__category .wp-block-group__inner-container) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 4rem !important;

}

.hb-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 4rem !important;

}

.hb-grid__col-1-1 {
    grid-column: 1 / 1;
}
.hb-grid__col-1-2 {
    grid-column: 1 / 2;
}
.hb-grid__col-1-3 {
    grid-column: 1 / 3;
}
.hb-grid__col-1-4 {
    grid-column: 1 / 4;
}
.hb-grid__col-1-5 {
    grid-column: 1 / 5;
}
.hb-grid__col-1-6 {
    grid-column: 1 / 6;
}
.hb-grid__col-1-7 {
    grid-column: 1 / 7;
}
.hb-grid__col-1-8 {
    grid-column: 1 / 8;
}
.hb-grid__col-1-9 {
    grid-column: 1 / 9;
}

.hb-grid__col-2-2 {
    grid-column: 2 / 2;
}
.hb-grid__col-2-3 {
    grid-column: 2 / 3;
}
.hb-grid__col-2-4 {
    grid-column: 2 / 4;
}
.hb-grid__col-2-5 {
    grid-column: 2 / 5;
}
.hb-grid__col-2-6 {
    grid-column: 2 / 6;
}
.hb-grid__col-2-7 {
    grid-column: 2 / 7;
}
.hb-grid__col-2-8 {
    grid-column: 2 / 8;
}
.hb-grid__col-2-9 {
    grid-column: 2 / 9;
}

.hb-grid__col-3-3 {
    grid-column: 3 / 3;
}
.hb-grid__col-3-4 {
    grid-column: 3 / 4;
}
.hb-grid__col-3-5 {
    grid-column: 3 / 5;
}
.hb-grid__col-3-6 {
    grid-column: 3 / 6;
}
.hb-grid__col-3-7 {
    grid-column: 3 / 7;
}
.hb-grid__col-3-8 {
    grid-column: 3 / 8;
}
.hb-grid__col-3-9 {
    grid-column: 3 / 9;
}

.hb-grid__col-4-4 {
    grid-column: 4 / 4;
}
.hb-grid__col-4-5 {
    grid-column: 4 / 5;
}
.hb-grid__col-4-6 {
    grid-column: 4 / 6;
}
.hb-grid__col-4-7 {
    grid-column: 4 / 7;
}
.hb-grid__col-4-8 {
    grid-column: 4 / 8;
}
.hb-grid__col-4-9 {
    grid-column: 4 / 9;
}

.hb-grid__col-5-5 {
    grid-column: 5 / 5;
}
.hb-grid__col-5-6 {
    grid-column: 5 / 6;
}
.hb-grid__col-5-7 {
    grid-column: 5 / 7;
}
.hb-grid__col-5-8 {
    grid-column: 5 / 8;
}
.hb-grid__col-5-9 {
    grid-column: 5 / 9;
}

.hb-grid__col-6-6 {
    grid-column: 6 / 6;
}
.hb-grid__col-6-7 {
    grid-column: 6 / 7;
}
.hb-grid__col-6-8 {
    grid-column: 6 / 8;
}
.hb-grid__col-6-9 {
    grid-column: 6 / 9;
}

.hb-grid__col-7-7 {
    grid-column: 7 / 7;
}
.hb-grid__col-7-8 {
    grid-column: 7 / 8;
}
.hb-grid__col-7-9 {
    grid-column: 7 / 9;
}

.hb-grid__col-8-8 {
    grid-column: 8 / 8;
}
.hb-grid__col-8-9 {
    grid-column: 8 / 9;
}

.hb-grid__col-9-9 {
    grid-column: 9 / 9;
}

.hb-grid--overlap {
    grid-row: 1 / 2;
}

.align-items--center {
    align-items: center;
}

.hb-grid__row-1-2 {
    grid-row: 1 / 2;
}

.hb-flex {
    display: flex;
    gap: 3rem;
}

.hb-flex__col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.hb-flex__col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.hb-flex__col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.hb-flex__col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.hb-flex__col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.hb-flex__col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.hb-flex__col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.hb-flex__col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.hb-flex__col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.hb-flex__col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.hb-flex__col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.hb-flex__col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.hb-columns--2 {
    columns: 2;
}

.hb-columns--3 {
    columns: 3;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

.mt-4 {
    margin-top: 4rem;
}

.mt-5 {
    margin-top: 5rem;
}

.mt-6 {
    margin-top: 6rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

.mb-5 {
    margin-bottom: 5rem;
}

.mb-6 {
    margin-bottom: 6rem;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.section {
    margin-bottom: 3rem;
}

@media only screen and (max-width: 810px) {
    .hb-grid,
    .hb-grid--2,
    .hb-grid--3,
    .hb-grid--4 {
        display: block !important;
    }
}