.color-primary {
  color: var(--primary);
}

.color-secondary {
  color: var(--secondary);
}

.color-ternary {
  color: var(--ternary);
}

.color-quaternary {
  color: var(--quaternary);
}

.color-quinary {
  color: var(--quinary);
}

.color-senary {
  color: var(--senary);
}

.color-septenary {
  color: var(--septenary);
}

.color-octonary {
  color: var(--octonary);
}

.font-size-xl {
  font-size: var(--font-size-xl);
}

.text-align-left {
  text-align: left;
}

.bg-transparent {
  background-color: transparent;
}

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-ternary {
  background-color: var(--ternary);
}

.bg-quaternary {
  background-color: var(--quaternary);
}

.bg-quinary {
  background-color: var(--quinary);
}

.bg-senary {
  background-color: var(--senary);
}

.box-shadow {
  box-shadow: 0 0 1rem var(--default-2);
}

.filter-grayscale {
  filter: grayscale(100%);
}

.opacity-8 {
  opacity: 0.8;
}

.flex-direction-row {
  flex-direction: row;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.display-none {
  display: none;
}

.display-flex {
  display: flex;
}

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

.align-items-flex-end {
  align-items: flex-end;
}

.align-items-flex-start {
  align-items: flex-start;
}

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

.flex-wrap-wrap {
  flex-wrap: wrap;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-between {
  justify-content: space-between;
}

.justify-content-space-evenly {
  justify-content: space-evenly;
}

.justify-content-flex-start {
  justify-content: flex-start;
}

.gap-none {
  gap: 0;
}

.gap-sm {
  gap: var(--padding-sm);
}
.gap-md {
  gap: var(--padding-md);
}

.gap-lg {
  gap: var(--padding-lg);
}
.padding-sm {
  padding: var(--padding-sm);
}

.padding-md {
  padding: var(--padding-md);
}

.padding-lg {
  padding: var(--padding-lg);
}

.margin-0 {
  margin: 0;
}

.border-radius-top-md {
  border-top-left-radius: var(--padding-md);
  border-top-right-radius: var(--padding-md);
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.height-100 {
  height: 100%;
}

.height-full {
  min-height: calc(100vh - var(--header-height));
}

.min-height-50vh {
  min-height: 50vh;
}

.min-height-80vh {
  min-height: 80vh;
}

.height-100 {
  height: 100%;
}

.width-100 {
  width: 100%;
}

.max-width-none {
  max-width: none;
}

.object-fit-contain {
  object-fit: contain;
}

.object-fit-cover {
  object-fit: cover;
}

.container-type-inline-size {
  container-type: inline-size;
}

.scroll-margin-top-header {
  scroll-margin-top: var(--header-height);
}