.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.t-2 {
  top: calc(var(--size) * 2);
}

.r-2 {
  right: calc(var(--size) * 2);
}

.d-flex {
  display: flex;
}

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

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

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

.j-content-end {
  justify-content: flex-end;
}

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

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

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

.g-1 {
  gap: var(--size);
}

.g-2 {
  gap: calc(var(--size) * 2);
}

.g-4 {
  gap: calc(var(--size) * 4);
}

.g-5 {
  gap: calc(var(--size) * 5);
}

.g-8 {
  gap: calc(var(--size) * 8);
}

.g-10 {
  gap: calc(var(--size) * 10);
}

.f-1 {
  flex: 1;
}

.f-2 {
  flex: 2;
}

.m-top-auto {
  margin-top: auto;
}

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

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

.c-white {
  color: var(--white-color);
}

.c-warning {
  color: var(--warning-color);
}

.c-shadow {
  color: var(--shadow);
}

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

.f-weight-700 {
  font-weight: 700;
}

.t-align-center {
  text-align: center;
}

@media (width >=768px) {
  .md\:d-none {
    display: none;
  }
}