.bg-gradient-custom {
    background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}


.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1;
}

@for $i from 1 through 12 {
    $width: (
        $i / 12) * 100%;

    .col-#{$i} {
        flex: 0 0 $width;
        max-width: $width;
    }
}


@for $i from 1 through 100 {
    .m-#{$i}rem {
        margin: #{$i}rem;
    }

    .mt-#{$i}rem {
        margin-top: #{$i}rem;
    }

    .ml-#{$i}rem {
        margin-left: #{$i}rem;
    }

    .mb-#{$i}rem {
        margin-bottom: #{$i}rem;
    }

    .mr-#{$i}rem {
        margin-right: #{$i}rem;
    }

    .p-#{$i}rem {
        padding: #{$i}rem;
    }

    .pt-#{$i}rem {
        padding-top: #{$i}rem;
    }

    .pl-#{$i}rem {
        padding-left: #{$i}rem;
    }

    .pb-#{$i}rem {
        padding-bottom: #{$i}rem;
    }

    .pr-#{$i}rem {
        padding-right: #{$i}rem;
    }
}