.g,.grid{display:grid}
.g2{grid-template-columns:repeat(2,1fr);grid-column-gap:var(--hh-grid-gutter,2rem)}
.gf{display:flex;flex-wrap:wrap}
.gf--auto-flow{display:grid;grid-auto-flow:column}
.gfi{padding-left:var(--hh-grid-gutter);padding-bottom:var(--hh-grid-gutter);width:calc(25% - var(--hh-grid-gutter) * 3 / 4);max-width:50%;flex-grow:1;flex-shrink:0;box-sizing:border-box}
.gf--gapless .gfi{padding-left:0;padding-bottom:0}
.gfi--center{align-self:center}
.gfi--full-width{flex:0 0 100%;max-width:100%}
.gf1 .gfi{max-width:100%;width:100%}
.gf2 .gfi{width:calc(50% - var(--hh-grid-gutter)/ 2);max-width:50%}
.gf3 .gfi{width:calc(33.33% - var(--hh-grid-gutter) * 2 / 3);max-width:33.33%}
.gf4 .gfi{width:calc(25% - var(--hh-grid-gutter) * 3 / 4);max-width:25%}
@media screen and (min-width:750px) and (max-width:989px){
.gf1--md .gfi{max-width:100%;width:100%}
.gf2--md .gfi{max-width:50%}
.gf3--md .gfi{width:calc(33.33% - var(--hh-grid-gutter) * 2 / 3);max-width:33.33%}
.gf4--md .gfi{width:calc(25% - var(--hh-grid-gutter) * 3 / 4);max-width:25%}
}
@media screen and (min-width:990px){
.gf1--lg .gfi{max-width:100%;width:100%}
.gf2--lg .gfi{max-width:50%}
.gf3--lg .gfi{width:calc(33.33% - var(--hh-grid-gutter) * 2 / 3);max-width:33.33%}
.gf4--lg .gfi{width:calc(25% - var(--hh-grid-gutter) * 3 / 4);max-width:25%}
}