/* Position */

/* 1. Promote fixed elements onto a new layer for performance. */

.position-fixed     { position: fixed; backface-visibility: hidden; /* 1 */ }
.position-absolute  { position: absolute; }
.position-relative  { position: relative; }
.position-static    { position: static; }
.position-sticky    { position: sticky; }

@media (--breakpoint-1) {
    .bp1-position-fixed     { position: fixed; backface-visibility: hidden; /* 1 */ }
    .bp1-position-absolute  { position: absolute; }
    .bp1-position-relative  { position: relative; }
    .bp1-position-static    { position: static; }
    .bp1-position-sticky    { position: sticky; }
}

@media (--breakpoint-2) {
    .bp2-position-fixed     { position: fixed; backface-visibility: hidden; /* 1 */ }
    .bp2-position-absolute  { position: absolute; }
    .bp2-position-relative  { position: relative; }
    .bp2-position-static    { position: static; }
    .bp2-position-sticky    { position: sticky; }
}

@media (--breakpoint-3) {
    .bp3-position-fixed     { position: fixed; backface-visibility: hidden; /* 1 */ }
    .bp3-position-absolute  { position: absolute; }
    .bp3-position-relative  { position: relative; }
    .bp3-position-static    { position: static; }
    .bp3-position-sticky    { position: sticky; }
}

@media (--breakpoint-4) {
    .bp4-position-fixed     { position: fixed; backface-visibility: hidden; /* 1 */ }
    .bp4-position-absolute  { position: absolute; }
    .bp4-position-relative  { position: relative; }
    .bp4-position-static    { position: static; }
    .bp4-position-sticky    { position: sticky; }
}