.hb-grid {
    display: grid !important;
    gap: 2rem;
}

/* Column span utilities for a 12-col grid */
.hb-grid__col-1-1 { grid-column: 1 / 2; }
.hb-grid__col-1-2 { grid-column: 1 / 3; }
.hb-grid__col-1-3 { grid-column: 1 / 4; }
.hb-grid__col-1-4 { grid-column: 1 / 5; }
.hb-grid__col-1-5 { grid-column: 1 / 6; }
.hb-grid__col-1-6 { grid-column: 1 / 7; }
.hb-grid__col-1-7 { grid-column: 1 / 8; }
.hb-grid__col-1-8 { grid-column: 1 / 9; }
.hb-grid__col-1-9 { grid-column: 1 / 10; }
.hb-grid__col-1-10 { grid-column: 1 / 11; }
.hb-grid__col-1-11 { grid-column: 1 / 12; }
.hb-grid__col-1-12 { grid-column: 1 / 13; }

/* Repeat pattern for each starting column */
.hb-grid__col-2-2 { grid-column: 2 / 3; }
.hb-grid__col-2-3 { grid-column: 2 / 4; }
.hb-grid__col-2-4 { grid-column: 2 / 5; }
.hb-grid__col-2-5 { grid-column: 2 / 6; }
.hb-grid__col-2-6 { grid-column: 2 / 7; }
.hb-grid__col-2-7 { grid-column: 2 / 8; }
.hb-grid__col-2-8 { grid-column: 2 / 9; }
.hb-grid__col-2-9 { grid-column: 2 / 10; }
.hb-grid__col-2-10 { grid-column: 2 / 11; }
.hb-grid__col-2-11 { grid-column: 2 / 12; }
.hb-grid__col-2-12 { grid-column: 2 / 13; }

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

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

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

.hb-grid__col-6-6 { grid-column: 6 / 7; }
.hb-grid__col-6-7 { grid-column: 6 / 8; }
.hb-grid__col-6-8 { grid-column: 6 / 9; }
.hb-grid__col-6-9 { grid-column: 6 / 10; }
.hb-grid__col-6-10 { grid-column: 6 / 11; }
.hb-grid__col-6-11 { grid-column: 6 / 12; }
.hb-grid__col-6-12 { grid-column: 6 / 13; }

.hb-grid__col-7-7 { grid-column: 7 / 8; }
.hb-grid__col-7-8 { grid-column: 7 / 9; }
.hb-grid__col-7-9 { grid-column: 7 / 10; }
.hb-grid__col-7-10 { grid-column: 7 / 11; }
.hb-grid__col-7-11 { grid-column: 7 / 12; }
.hb-grid__col-7-12 { grid-column: 7 / 13; }

.hb-grid__col-8-8 { grid-column: 8 / 9; }
.hb-grid__col-8-9 { grid-column: 8 / 10; }
.hb-grid__col-8-10 { grid-column: 8 / 11; }
.hb-grid__col-8-11 { grid-column: 8 / 12; }
.hb-grid__col-8-12 { grid-column: 8 / 13; }

.hb-grid__col-9-9 { grid-column: 9 / 10; }
.hb-grid__col-9-10 { grid-column: 9 / 11; }
.hb-grid__col-9-11 { grid-column: 9 / 12; }
.hb-grid__col-9-12 { grid-column: 9 / 13; }

.hb-grid__col-10-10 { grid-column: 10 / 11; }
.hb-grid__col-10-11 { grid-column: 10 / 12; }
.hb-grid__col-10-12 { grid-column: 10 / 13; }

.hb-grid__col-11-11 { grid-column: 11 / 12; }
.hb-grid__col-11-12 { grid-column: 11 / 13; }

.hb-grid__col-12-12 { grid-column: 12 / 13; }

/* Column count variations */
.hb-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.hb-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

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

.hb-grid--5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

.hb-grid--6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}

.hb-grid--7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2rem;
}

.hb-grid--8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2rem;
}

.hb-grid--9 {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2rem;
}

.hb-grid--10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2rem;
}

.hb-grid--11 {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 2rem;
}

.hb-grid--12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

/* Gap utilities */
.hb-gap--1 {
    gap: 1rem;
}

.hb-gap--2 {
    gap: 2rem;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.padding-bottom--0 {
    padding-bottom: 0;
}

.padding-top--0 {
    padding-top: 0;
}

.padding-top--1 {
    padding-top: 1rem;
}

.padding-top--2 {
    padding-top: 2rem;
}

.padding-top--3 {
    padding-top: 3rem;
}

.padding-top--4 {
    padding-top: 4rem;
}

.padding-top--5 {
    padding-top: 5rem;
}

.padding-top--6 {
    padding-top: 6rem;
}

.padding-bottom--1 {
    padding-bottom: 1rem;
}

.padding-bottom--2 {
    padding-bottom: 2rem;
}

.padding-bottom--3 {
    padding-bottom: 3rem;
}

.padding-bottom--4 {
    padding-bottom: 4rem;
}

.padding-bottom--5 {
    padding-bottom: 5rem;
}

.padding-bottom--6 {
    padding-bottom: 6rem;
}


.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}


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