@mixin RV-Alignment--top { align-content: start; } @mixin RV-Alignment--bottom { align-content: end; } @mixin RV-Alignment--left { justify-content: start; } @mixin RV-Alignment--right { justify-content: end; } @mixin RV-Alignment--horizontalCenter { justify-content: center; } @mixin RV-Alignment--verticalCenter { align-content: center; } @mixin RV-Alignment--center { @include RV-Alignment--horizontalCenter; @include RV-Alignment--verticalCenter; } @mixin RV-Alignment { &__Container { display: grid; &--top { @include RV-Alignment--top; } &--bottom { @include RV-Alignment--bottom; } &--left { @include RV-Alignment--left; } &--right { @include RV-Alignment--right; } &--horizontalCenter { @include RV-Alignment--horizontalCenter; } &--verticalCenter { @include RV-Alignment--verticalCenter; } &--center { @include RV-Alignment--center; } } } .RV-Alignment { @include RV-Alignment; &__Item { &--right { justify-self: end; } } }