/* Will change */

.wc-scrollPosition  { will-change: scroll-position; }
.wc-contents        { will-change: contents; }
.wc-transform       { will-change: transform; }
.wc-opacity         { will-change: opacity; }
.wc-top             { will-change: top; }
.wc-left            { will-change: left; }
.wc-bottom          { will-change: bottom; }
.wc-right           { will-change: right; }

@media (--breakpoint-1) {
    .bp1-wc-scrollPosition  { will-change: scroll-position; }
    .bp1-wc-contents        { will-change: contents; }
    .bp1-wc-transform       { will-change: transform; }
    .bp1-wc-opacity         { will-change: opacity; }
    .bp1-wc-top             { will-change: top; }
    .bp1-wc-left            { will-change: left; }
    .bp1-wc-bottom          { will-change: bottom; }
    .bp1-wc-right           { will-change: right; }
}

@media (--breakpoint-2) {
    .bp2-wc-scrollPosition  { will-change: scroll-position; }
    .bp2-wc-contents        { will-change: contents; }
    .bp2-wc-transform       { will-change: transform; }
    .bp2-wc-opacity         { will-change: opacity; }
    .bp2-wc-top             { will-change: top; }
    .bp2-wc-left            { will-change: left; }
    .bp2-wc-bottom          { will-change: bottom; }
    .bp2-wc-right           { will-change: right; }
}

@media (--breakpoint-3) {
    .bp3-wc-scrollPosition  { will-change: scroll-position; }
    .bp3-wc-contents        { will-change: contents; }
    .bp3-wc-transform       { will-change: transform; }
    .bp3-wc-opacity         { will-change: opacity; }
    .bp3-wc-top             { will-change: top; }
    .bp3-wc-left            { will-change: left; }
    .bp3-wc-bottom          { will-change: bottom; }
    .bp3-wc-right           { will-change: right; }
}

@media (--breakpoint-4) {
    .bp4-wc-scrollPosition  { will-change: scroll-position; }
    .bp4-wc-contents        { will-change: contents; }
    .bp4-wc-transform       { will-change: transform; }
    .bp4-wc-opacity         { will-change: opacity; }
    .bp4-wc-top             { will-change: top; }
    .bp4-wc-left            { will-change: left; }
    .bp4-wc-bottom          { will-change: bottom; }
    .bp4-wc-right           { will-change: right; }
}