/* ==== 
 --------- (1.01) mixins start ---------
 ==== */

// background image shortcut
@mixin background($color, $repeat, $size, $position) {
  background-color: $color;
  background-repeat: $repeat;
  background-size: $size;
  background-position: $position;
}

// center element with width
@mixin center($width) {
  max-width: $width;
  margin-inline-start: auto;
  margin-inline-end: auto;
  text-align: center;
}

// center element with width and alignment
@mixin box($value) {
  width: $value;
  min-width: $value;
  height: $value;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==== 
 --------- (1.01) mixins end ---------
 ==== */