.top-0    { top:    0; }
.right-0  { right:  0; }
.bottom-0 { bottom: 0; }
.left-0   { left:   0; }

.top-1    { top:    var(--spacing-medium); }
.right-1  { right:  var(--spacing-medium); }
.bottom-1 { bottom: var(--spacing-medium); }
.left-1   { left:   var(--spacing-medium); }

.top-2    { top:    2rem; }
.right-2  { right:  2rem; }
.bottom-2 { bottom: 2rem; }
.left-2   { left:   2rem; }

.top--1    { top:    -var(--spacing-medium); }
.right--1  { right:  -var(--spacing-medium); }
.bottom--1 { bottom: -var(--spacing-medium); }
.left--1   { left:   -var(--spacing-medium); }

.top--2    { top:    -2rem; }
.right--2  { right:  -2rem; }
.bottom--2 { bottom: -2rem; }
.left--2   { left:   -2rem; }


.absolute--fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media (--breakpoint-not-small) {
  .top-0-ns     { top:   0; }
  .left-0-ns    { left:  0; }
  .right-0-ns   { right: 0; }
  .bottom-0-ns  { bottom: 0; }
  .top-1-ns     { top:   var(--spacing-medium); }
  .left-1-ns    { left:  var(--spacing-medium); }
  .right-1-ns   { right: var(--spacing-medium); }
  .bottom-1-ns  { bottom: var(--spacing-medium); }
  .top-2-ns     { top:   2rem; }
  .left-2-ns    { left:  2rem; }
  .right-2-ns   { right: 2rem; }
  .bottom-2-ns  { bottom: 2rem; }
  .top--1-ns    { top:    -var(--spacing-medium); }
  .right--1-ns  { right:  -var(--spacing-medium); }
  .bottom--1-ns { bottom: -var(--spacing-medium); }
  .left--1-ns   { left:   -var(--spacing-medium); }
  .top--2-ns    { top:    -2rem; }
  .right--2-ns  { right:  -2rem; }
  .bottom--2-ns { bottom: -2rem; }
  .left--2-ns   { left:   -2rem; }
  .absolute--fill-ns {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

@media (--breakpoint-medium) {
  .top-0-m     { top:   0; }
  .left-0-m    { left:  0; }
  .right-0-m   { right: 0; }
  .bottom-0-m  { bottom: 0; }
  .top-1-m     { top:   var(--spacing-medium); }
  .left-1-m    { left:  var(--spacing-medium); }
  .right-1-m   { right: var(--spacing-medium); }
  .bottom-1-m  { bottom: var(--spacing-medium); }
  .top-2-m     { top:   2rem; }
  .left-2-m    { left:  2rem; }
  .right-2-m   { right: 2rem; }
  .bottom-2-m  { bottom: 2rem; }
  .top--1-m    { top:    -var(--spacing-medium); }
  .right--1-m  { right:  -var(--spacing-medium); }
  .bottom--1-m { bottom: -var(--spacing-medium); }
  .left--1-m   { left:   -var(--spacing-medium); }
  .top--2-m    { top:    -2rem; }
  .right--2-m  { right:  -2rem; }
  .bottom--2-m { bottom: -2rem; }
  .left--2-m   { left:   -2rem; }
  .absolute--fill-m {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

@media (--breakpoint-large) {
  .top-0-l     { top:   0; }
  .left-0-l    { left:  0; }
  .right-0-l   { right: 0; }
  .bottom-0-l  { bottom: 0; }
  .top-1-l     { top:   var(--spacing-medium); }
  .left-1-l    { left:  var(--spacing-medium); }
  .right-1-l   { right: var(--spacing-medium); }
  .bottom-1-l  { bottom: var(--spacing-medium); }
  .top-2-l     { top:   2rem; }
  .left-2-l    { left:  2rem; }
  .right-2-l   { right: 2rem; }
  .bottom-2-l  { bottom: 2rem; }
  .top--1-l    { top:    -var(--spacing-medium); }
  .right--1-l  { right:  -var(--spacing-medium); }
  .bottom--1-l { bottom: -var(--spacing-medium); }
  .left--1-l   { left:   -var(--spacing-medium); }
  .top--2-l    { top:    -2rem; }
  .right--2-l  { right:  -2rem; }
  .bottom--2-l { bottom: -2rem; }
  .left--2-l   { left:   -2rem; }
  .absolute--fill-l {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}