.as-flexStart           { align-self: flex-start; }
.as-flexEnd             { align-self: flex-end; }
.as-center              { align-self: center; }
.as-baseline            { align-self: baseline; }
.as-stretch             { align-self: stretch; }

@media (--breakpoint-1) {
    .bp1-as-flexStart           { align-self: flex-start; }
    .bp1-as-flexEnd             { align-self: flex-end; }
    .bp1-as-center              { align-self: center; }
    .bp1-as-baseline            { align-self: baseline; }
    .bp1-as-stretch             { align-self: stretch; }
}

@media (--breakpoint-2) {
    .bp2-as-flexStart           { align-self: flex-start; }
    .bp2-as-flexEnd             { align-self: flex-end; }
    .bp2-as-center              { align-self: center; }
    .bp2-as-baseline            { align-self: baseline; }
    .bp2-as-stretch             { align-self: stretch; }
}

@media (--breakpoint-3) {
    .bp3-as-flexStart           { align-self: flex-start; }
    .bp3-as-flexEnd             { align-self: flex-end; }
    .bp3-as-center              { align-self: center; }
    .bp3-as-baseline            { align-self: baseline; }
    .bp3-as-stretch             { align-self: stretch; }
}

@media (--breakpoint-4) {
    .bp4-as-flexStart           { align-self: flex-start; }
    .bp4-as-flexEnd             { align-self: flex-end; }
    .bp4-as-center              { align-self: center; }
    .bp4-as-baseline            { align-self: baseline; }
    .bp4-as-stretch             { align-self: stretch; }
}