// # utilities #
.p-relative {
  position: relative;
}
.z-index-1 {
  z-index: 1;
}
.px-gutter {
  padding-left: $grid-gutter-width * .5;
  padding-right: $grid-gutter-width * .5;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-current {
  color: currentColor;
}
.rounded-50 {
  border-radius: 50%;
}
// # display flex with centered columns (verticaly + horizontaly) #
.flex-center {
  @extend .d-flex;
  @extend .align-items-center;
  @extend .justify-content-center;
}
.no-nesting {
  >* {
    pointer-events: none;
  }
}
// ## Borders ##
.border-last-0:last-child {
  border-bottom: 0 !important;
}
.border-first-0:first-child {
  border-top: 0 !important;
}
.border-current { border-color: currentColor !important; }
.border-light-10 { border-color: rgba($light, .1) !important; }
.border-light-20 { border-color: rgba($light, .2) !important; }
.border-light-30 { border-color: rgba($light, .3) !important; }
.border-light-40 { border-color: rgba($light, .4) !important; }
.border-light-50 { border-color: rgba($light, .5) !important; }
.border-dark-10 { border-color: rgba($dark, .1) !important; }
.border-dark-20 { border-color: rgba($dark, .2) !important; }
.border-dark-30 { border-color: rgba($dark, .3) !important; }
.border-dark-40 { border-color: rgba($dark, .4) !important; }
.border-dark-50 { border-color: rgba($dark, .5) !important; }
// # SVG fill current color #
svg,
a svg,
a:hover svg,
button svg,
button:hover svg {
  fill: currentColor;
}
// # image containers #
.r-image-16-9,
.r-image-21-9,
.r-image-8-5,
.r-image-4-3,
.r-image-1-1,
.r-image-3-4,
.r-image-8-9 {
  position: relative;
  height: 0;
  padding-bottom: 50%;
  img, canvas {
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.r-image-16-9 {
  padding-bottom: 56.25%;
}
.r-image-21-9 {
  padding-bottom: 42.85%;
}
.r-image-8-5 {
  padding-bottom: 62.5%;
}
.r-image-4-3 {
  padding-bottom: 75%;
}
.r-image-1-1 {
  padding-bottom: 100%;
}
.r-image-3-4 {
  padding-bottom: 133%;
}
.r-image-8-9 {
  padding-bottom: 112.5%;
}
// r clip patch
.r-clip-path {
  --clip-top: 0;
  --clip-right: 0;
  --clip-bottom: 0;
  --clip-left: 0;
  clip-path: inset(var(--clip-top) var(--clip-right) var(--clip-bottom) var(--clip-left));
}

// negative margins
.mt--10 { margin-top: - $vertical-margin-spacer * 1; }
.mt--20 { margin-top: - $vertical-margin-spacer * 2; }
.mt--30 { margin-top: - $vertical-margin-spacer * 3; }
.mt--40 { margin-top: - $vertical-margin-spacer * 4; }
.mt--50 { margin-top: - $vertical-margin-spacer * 5; }
.mt--60 { margin-top: - $vertical-margin-spacer * 6; }
.mt--70 { margin-top: - $vertical-margin-spacer * 7; }
.mt--80 { margin-top: - $vertical-margin-spacer * 8; }
.mt--90 { margin-top: - $vertical-margin-spacer * 9; }
.mt--100 { margin-top: - $vertical-margin-spacer * 10; }
.mt--110 { margin-top: - $vertical-margin-spacer * 11; }
.mt--120 { margin-top: - $vertical-margin-spacer * 12; }
.mt--130 { margin-top: - $vertical-margin-spacer * 13; }
.mt--140 { margin-top: - $vertical-margin-spacer * 14; }
.mt--150 { margin-top: - $vertical-margin-spacer * 15; }
.mt--160 { margin-top: - $vertical-margin-spacer * 16; }
.mt--170 { margin-top: - $vertical-margin-spacer * 17; }
.mt--180 { margin-top: - $vertical-margin-spacer * 18; }
.mt--190 { margin-top: - $vertical-margin-spacer * 19; }
@media (min-width: 768px) {
  .mt-md--10 { margin-top: - $vertical-margin-spacer * 1; }
  .mt-md--20 { margin-top: - $vertical-margin-spacer * 2; }
  .mt-md--30 { margin-top: - $vertical-margin-spacer * 3; }
  .mt-md--40 { margin-top: - $vertical-margin-spacer * 4; }
  .mt-md--50 { margin-top: - $vertical-margin-spacer * 5; }
  .mt-md--60 { margin-top: - $vertical-margin-spacer * 6; }
  .mt-md--70 { margin-top: - $vertical-margin-spacer * 7; }
  .mt-md--80 { margin-top: - $vertical-margin-spacer * 8; }
  .mt-md--90 { margin-top: - $vertical-margin-spacer * 9; }
  .mt-md--100 { margin-top: - $vertical-margin-spacer * 10; }
  .mt-md--110 { margin-top: - $vertical-margin-spacer * 11; }
  .mt-md--120 { margin-top: - $vertical-margin-spacer * 12; }
  .mt-md--130 { margin-top: - $vertical-margin-spacer * 13; }
  .mt-md--140 { margin-top: - $vertical-margin-spacer * 14; }
  .mt-md--150 { margin-top: - $vertical-margin-spacer * 15; }
  .mt-md--160 { margin-top: - $vertical-margin-spacer * 16; }
  .mt-md--170 { margin-top: - $vertical-margin-spacer * 17; }
  .mt-md--180 { margin-top: - $vertical-margin-spacer * 18; }
  .mt-md--190 { margin-top: - $vertical-margin-spacer * 19; }
}
@media (min-width: 992px) {
  .mt-lg--10 { margin-top: - $vertical-margin-spacer * 1; }
  .mt-lg--20 { margin-top: - $vertical-margin-spacer * 2; }
  .mt-lg--30 { margin-top: - $vertical-margin-spacer * 3; }
  .mt-lg--40 { margin-top: - $vertical-margin-spacer * 4; }
  .mt-lg--50 { margin-top: - $vertical-margin-spacer * 5; }
  .mt-lg--60 { margin-top: - $vertical-margin-spacer * 6; }
  .mt-lg--70 { margin-top: - $vertical-margin-spacer * 7; }
  .mt-lg--80 { margin-top: - $vertical-margin-spacer * 8; }
  .mt-lg--90 { margin-top: - $vertical-margin-spacer * 9; }
  .mt-lg--100 { margin-top: - $vertical-margin-spacer * 10; }
  .mt-lg--110 { margin-top: - $vertical-margin-spacer * 11; }
  .mt-lg--120 { margin-top: - $vertical-margin-spacer * 12; }
  .mt-lg--130 { margin-top: - $vertical-margin-spacer * 13; }
  .mt-lg--140 { margin-top: - $vertical-margin-spacer * 14; }
  .mt-lg--150 { margin-top: - $vertical-margin-spacer * 15; }
  .mt-lg--160 { margin-top: - $vertical-margin-spacer * 16; }
  .mt-lg--170 { margin-top: - $vertical-margin-spacer * 17; }
  .mt-lg--180 { margin-top: - $vertical-margin-spacer * 18; }
  .mt-lg--190 { margin-top: - $vertical-margin-spacer * 19; }
  .mt-lg--200 { margin-top: - $vertical-margin-spacer * 20; }
  .mt-lg--210 { margin-top: - $vertical-margin-spacer * 21; }
  .mt-lg--220 { margin-top: - $vertical-margin-spacer * 22; }
  .mt-lg--230 { margin-top: - $vertical-margin-spacer * 23; }
  .mt-lg--240 { margin-top: - $vertical-margin-spacer * 24; }
  .mt-lg--250 { margin-top: - $vertical-margin-spacer * 25; }
}
// ### Max width blocks ###
.max-w-40 { max-width: 40em; }
.max-w-39 { max-width: 39em; }
.max-w-38 { max-width: 38em; }
.max-w-37 { max-width: 37em; }
.max-w-36 { max-width: 36em; }
.max-w-35 { max-width: 35em; }
.max-w-34 { max-width: 34em; }
.max-w-33 { max-width: 33em; }
.max-w-32 { max-width: 32em; }
.max-w-31 { max-width: 31em; }
.max-w-30 { max-width: 30em; }
.max-w-29 { max-width: 29em; }
.max-w-28 { max-width: 28em; }
.max-w-27 { max-width: 27em; }
.max-w-26 { max-width: 26em; }
.max-w-25 { max-width: 25em; }
.max-w-24 { max-width: 24em; }
.max-w-23 { max-width: 23em; }
.max-w-22 { max-width: 22em; }
.max-w-21 { max-width: 21em; }
.max-w-20 { max-width: 20em; }
.max-w-19 { max-width: 19em; }
.max-w-18 { max-width: 18em; }
.max-w-17 { max-width: 17em; }
.max-w-16 { max-width: 16em; }
.max-w-15 { max-width: 15em; }
.max-w-14 { max-width: 14em; }
.max-w-13 { max-width: 13em; }
.max-w-12 { max-width: 12em; }
.max-w-11 { max-width: 11em; }
.max-w-10 { max-width: 10em; }
.max-w-9 { max-width: 9em; }
.max-w-8 { max-width: 8em; }
.max-w-7 { max-width: 7em; }
.max-w-6 { max-width: 6em; }
.max-w-5 { max-width: 5em; }
.max-w-4 { max-width: 4em; }
.max-w-3 { max-width: 3em; }
.max-w-2 { max-width: 2em; }
.max-w-1 { max-width: 1em; }