@layer grid{:root{--row-gap:5px;--column-gap:5px;--align-items:stretch;--justify-content:start;--align-content:stretch;--flex-wrap:wrap;--display-column:block}.my-row{display:flex;--current-flex-wrap:var(--flex-wrap);--current-align-content:var(--align-content);--current-align-items:var(--align-items);--current-justify-content:var(--justify-content);--current-row-gap:var(--row-gap);--current-column-gap:var(--column-gap);flex-wrap:var(--current-flex-wrap);align-content:var(--current-align-content);align-items:var(--current-align-items);justify-content:var(--current-justify-content);row-gap:var(--current-row-gap);column-gap:var(--current-column-gap)}.my-col{--current-display-column:var(--display-column);--current-span:var(--span);--width:calc(100% * var(--current-span) / var(--default-column) - (var(--default-column) - var(--current-span)) * (var(--current-column-gap) / var(--default-column)));flex:0 0 var(--width);max-width:var(--width);position:relative;display:var(--current-display-column)}.my-col-push{--current-push:var(--push)}.my-col-push,.my-col-push-lg,.my-col-push-md,.my-col-push-sm,.my-col-push-xl,.my-col-push-xs,.my-col-push-xxl,.my-col-push-xxxl{--inset-inline-start:calc((100% * var(--current-push) / var(--default-column) - (var(--default-column) - var(--current-push)) * (var(--current-column-gap) / var(--default-column))) + var(--current-column-gap));inset-inline-start:var(--inset-inline-start)}.my-col-pull{--current-pull:var(--pull)}.my-col-pull,.my-col-pull-lg,.my-col-pull-md,.my-col-pull-sm,.my-col-pull-xl,.my-col-pull-xs,.my-col-pull-xxl,.my-col-pull-xxxl{--inset-inline-end:calc((100% * var(--current-pull) / var(--default-column) - (var(--default-column) - var(--current-pull)) * (var(--current-column-gap) / var(--default-column))) + var(--current-column-gap));inset-inline-end:var(--inset-inline-end)}.my-col-offset{--current-offset:var(--offset)}.my-col-offset,.my-col-offset-lg,.my-col-offset-md,.my-col-offset-sm,.my-col-offset-xl,.my-col-offset-xs,.my-col-offset-xxl,.my-col-offset-xxxl{--margin-inline-start:calc((100% * var(--current-offset) / var(--default-column) - (var(--default-column) - var(--current-offset)) * (var(--current-column-gap) / var(--default-column))) + var(--current-column-gap));margin-inline-start:var(--margin-inline-start)}.my-col-order{--current-order:var(--order)}.my-col-order,.my-col-order-lg,.my-col-order-md,.my-col-order-sm,.my-col-order-xl,.my-col-order-xs,.my-col-order-xxl,.my-col-order-xxxl{order:var(--current-order)}}@layer grid-media-query{@media (min-width:640px){.my-row-gap-sm{--current-row-gap:var(--row-gap-sm);--current-column-gap:var(--column-gap-sm)}.my-row-items-sm{--current-align-items:var(--align-items-sm)}.my-row-justify-sm{--current-justify-content:var(--justify-content-sm)}.my-row-content-sm{--current-align-content:var(--align-content-sm)}.my-col-push-sm{--current-push:var(--push-sm)}.my-col-pull-sm{--current-pull:var(--pull-sm)}.my-col-offset-sm{--current-offset:var(--offset-sm)}.my-col-span-sm{--current-span:var(--span-sm);--current-display-column:var(--display-column-sm)}.my-col-order-sm{--current-order:var(--order-sm)}}@media (min-width:768px){.my-row-gap-md{--current-row-gap:var(--row-gap-md);--current-column-gap:var(--column-gap-md)}.my-row-items-md{--current-align-items:var(--align-items-md)}.my-row-justify-md{--current-justify-content:var(--justify-content-md)}.my-row-content-md{--current-align-content:var(--align-content-md)}.my-col-push-md{--current-push:var(--push-md)}.my-col-pull-md{--current-pull:var(--pull-md)}.my-col-offset-md{--current-offset:var(--offset-md)}.my-col-span-md{--current-span:var(--span-md);--current-display-column:var(--display-column-md)}.my-col-order-md{--current-order:var(--order-md)}}@media (min-width:1024px){.my-row-gap-lg{--current-row-gap:var(--row-gap-lg);--current-column-gap:var(--column-gap-lg)}.my-row-items-lg{--current-align-items:var(--align-items-lg)}.my-row-justify-lg{--current-justify-content:var(--justify-content-lg)}.my-row-content-lg{--current-align-content:var(--align-content-lg)}.my-col-push-lg{--current-push:var(--push-lg)}.my-col-pull-lg{--current-pull:var(--pull-lg)}.my-col-offset-lg{--current-offset:var(--offset-lg)}.my-col-span-lg{--current-span:var(--span-lg);--current-display-column:var(--display-column-lg)}.my-col-order-lg{--current-order:var(--order-lg)}}@media (min-width:1280px){.my-row-gap-xl{--current-row-gap:var(--row-gap-xl);--current-column-gap:var(--column-gap-xl)}.my-row-items-xl{--current-align-items:var(--align-items-xl)}.my-row-justify-xl{--current-justify-content:var(--justify-content-xl)}.my-row-content-xl{--current-align-content:var(--align-content-xl)}.my-col-push-xl{--current-push:var(--push-xl)}.my-col-pull-xl{--current-pull:var(--pull-xl)}.my-col-offset-xl{--current-offset:var(--offset-xl)}.my-col-span-xl{--current-span:var(--span-xl);--current-display-column:var(--display-column-xl)}.my-col-order-xl{--current-order:var(--order-xl)}}@media (min-width:1536px){.my-row-gap-xxl{--current-row-gap:var(--row-gap-xxl);--current-column-gap:var(--column-gap-xxl)}.my-row-items-xxl{--current-align-items:var(--align-items-xxl)}.my-row-justify-xxl{--current-justify-content:var(--justify-content-xxl)}.my-row-content-xxl{--current-align-content:var(--align-content-xxl)}.my-col-push-xxl{--current-push:var(--push-xxl)}.my-col-pull-xxl{--current-pull:var(--pull-xxl)}.my-col-offset-xxl{--current-offset:var(--offset-xxl)}.my-col-span-xxl{--current-span:var(--span-xxl);--current-display-column:var(--display-column-xxl)}.my-col-order-xxl{--current-order:var(--order-xxl)}}@media (min-width:1792px){.my-row-gap-xxxl{--current-row-gap:var(--row-gap-xxxl);--current-column-gap:var(--column-gap-xxxl)}.my-row-items-xxxl{--current-align-items:var(--align-items-xxxl)}.my-row-justify-xxl{--current-justify-content:var(--justify-content-xxxl)}.my-row-content-xxxl{--current-align-content:var(--align-content-xxxl)}.my-col-push-xxxl{--current-push:var(--push-xxxl)}.my-col-pull-xxxl{--current-pull:var(--pull-xxxl)}.my-col-offset-xxxl{--current-offset:var(--offset-xxxl)}.my-col-span-xxxl{--current-span:var(--span-xxxl);--current-display-column:var(--display-column-xxxl)}.my-col-order-xxxl{--current-order:var(--order-xxxl)}}}