.position-relative {
  position: relative;
}

/* #region width height */

.w-100 {
  width: 100%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.h-100 {
  height: 100%;
}

/* #endregion */

/* #region display */
.flex {
  display: flex;
}

.sm-flex {
  display: none;
}

.md-flex {
  display: none;
}

.lg-flex {
  display: none;
}

.lg-flex {
  display: none;
}

.block {
  display: block;
}
.block-md-flex {
  display: block;
}

.block-lg-flex {
  display: block;
}

.sm-block {
  display: none;
}

.md-block {
  display: none;
}

.lg-block {
  display: none;
}

.xl-block {
  display: none;
}

/* #endregion */

/* #region justify content and align */
.justify-content-center {
  justify-content: center;
}

.justify-content-around {
  justify-content: space-around;
}
.justify-content-end {
  justify-content: flex-end;
}

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

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

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

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

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

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

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

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

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

/* #endregion */

/* #region flex */

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

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

.flex-gap-1 {
  gap: 0px 10px;
}

/* #endregion */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

@media (min-width: 576px) {
  .sm-flex {
    display: flex;
  }

  .sm-block {
    display: block;
  }
}

@media (min-width: 768px) {
  .md-flex {
    display: flex;
  }

  .block-md-flex {
    display: flex;
  }

  .md-block {
    display: block;
  }

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

  .w-md-40 {
    width: 40%;
  }

  .w-md-60 {
    width: 60%;
  }
}

@media (min-width: 992px) {
  .lg-flex {
    display: flex;
  }

  .lg-block {
    display: block;
  }

  .block-lg-flex {
    display: flex;
  }
}

@media (min-width: 1200px) {
  .xl-flex {
    display: flex;
  }

  .xl-block {
    display: block;
  }
}