.navds-hgrid {
  --__axc-hgrid-columns-xs: initial;
  --__axc-hgrid-columns-sm: var(--__axc-hgrid-columns-xs);
  --__axc-hgrid-columns-md: var(--__axc-hgrid-columns-sm);
  --__axc-hgrid-columns-lg: var(--__axc-hgrid-columns-md);
  --__axc-hgrid-columns-xl: var(--__axc-hgrid-columns-lg);
  --__axc-hgrid-columns-2xl: var(--__axc-hgrid-columns-xl);
  --__axc-hgrid-columns: var(--__axc-hgrid-columns-xs);

  display: grid;
  grid-template-columns: var(--__axc-hgrid-columns);
}

.navds-hgrid-gap {
  --__axc-hgrid-gap-xs: initial;
  --__axc-hgrid-gap-sm: var(--__axc-hgrid-gap-xs);
  --__axc-hgrid-gap-md: var(--__axc-hgrid-gap-sm);
  --__axc-hgrid-gap-lg: var(--__axc-hgrid-gap-md);
  --__axc-hgrid-gap-xl: var(--__axc-hgrid-gap-lg);
  --__axc-hgrid-gap-2xl: var(--__axc-hgrid-gap-xl);
  --__axc-hgrid-gap: var(--__axc-hgrid-gap-xs);

  gap: var(--__axc-hgrid-gap);
}

.navds-hgrid-align {
  --__axc-hgrid-align: initial;

  align-items: var(--__axc-hgrid-align);
}

@media (min-width: 480px) {
  .navds-hgrid {
    --__axc-hgrid-columns: var(--__axc-hgrid-columns-sm);
  }

  .navds-hgrid-gap {
    --__axc-hgrid-gap: var(--__axc-hgrid-gap-sm);
  }
}

@media (min-width: 768px) {
  .navds-hgrid {
    --__axc-hgrid-columns: var(--__axc-hgrid-columns-md);
  }

  .navds-hgrid-gap {
    --__axc-hgrid-gap: var(--__axc-hgrid-gap-md);
  }
}

@media (min-width: 1024px) {
  .navds-hgrid {
    --__axc-hgrid-columns: var(--__axc-hgrid-columns-lg);
  }

  .navds-hgrid-gap {
    --__axc-hgrid-gap: var(--__axc-hgrid-gap-lg);
  }
}

@media (min-width: 1280px) {
  .navds-hgrid {
    --__axc-hgrid-columns: var(--__axc-hgrid-columns-xl);
  }

  .navds-hgrid-gap {
    --__axc-hgrid-gap: var(--__axc-hgrid-gap-xl);
  }
}

@media (min-width: 1440px) {
  .navds-hgrid {
    --__axc-hgrid-columns: var(--__axc-hgrid-columns-2xl);
  }

  .navds-hgrid-gap {
    --__axc-hgrid-gap: var(--__axc-hgrid-gap-2xl);
  }
}
