.green-pattern,
.orange-pattern,
.blue-pattern,
.purple-pattern,
.yellow-pattern {
    position: relative;
    overflow: hidden;
}

.green-pattern::before,
.orange-pattern::before,
.blue-pattern::before,
.purple-pattern::before,
.yellow-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.green-pattern::before {
    background: linear-gradient(
        244.19deg,
        rgba(46, 162, 23, 0.78) 11.69%,
        rgba(18, 64, 6, 0.78) 54.22%
    );
}

.orange-pattern::before {
    background: linear-gradient(
        244.19deg,
        rgba(246, 139, 31, 0.78) 11.69%,
        rgba(154, 0, 0, 0.78) 53.55%
    );
}

.blue-pattern::before {
    background: linear-gradient(
        244.19deg,
        rgba(41, 92, 170, 0.78) 11.69%,
        rgba(3, 33, 80, 0.78) 53.55%
    );
}

.purple-pattern::before {
    background: linear-gradient(
        244.19deg,
        rgba(123, 74, 226, 0.78) 11.69%,
        rgba(58, 22, 122, 0.78) 53.55%
    );
}

.yellow-pattern::before {
    background: linear-gradient(
        244.19deg,
        rgba(255, 214, 10, 0.78) 11.69%,
        rgba(184, 134, 11, 0.78) 53.55%
    );
}

/* cała treść ma być nad overlayem */
.green-pattern > *,
.orange-pattern > *,
.blue-pattern > *,
.purple-pattern > *,
.yellow-pattern > * {
    position: relative;
    z-index: 1;
}