$gradients: (
    primary: $primary,
    warning: $warning,
);

@each $name, $color in $gradients {
    .bg-#{$name}-gradient {
        position: relative;

        &::before {
            background: linear-gradient(to bottom, $color, transparent);
            position: absolute;
            content: "";
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
        }

        div,
        nav,
        h1 {
            position: relative;
            z-index: 2;
        }
    }
}

.bg-black-50 {
    background-color: rgba(black, 0.5);
}