.main:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(
            to right,
            #C82090 0%,
            #6A14D1 100%
    );
    filter: blur(135px);
    z-index: 3;
}

.mask-top {
    position: absolute;
    top: 0;
    z-index: 1;
}

.mask-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

@media (orientation: portrait) and (min-width: 0px) {
    .mask-top {
        width: 100%;
        height: 30%;
        background: url('../img/mask/mask_top_mobile.webp') no-repeat center center;
        background-size: cover;
    }

    .mask-bottom {
        width: 100%;
        height: 100%;
        background: url('../img/mask/mask_bottom_mobile.webp') no-repeat center center;
        background-size: cover;
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 1024px) {
    .mask-top {
        height: 40%;
        background: url('../img/mask/mask_top_tablet.webp') no-repeat center center;
        background-size: cover;
    }

    .mask-bottom {
        background: url('../img/mask/mask_bottom_tablet.webp') no-repeat center center;
        background-size: cover;
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .mask-top {
        width: 100%;
        height: 40%;
        background: url('../img/mask/mask_top_desktop.webp') no-repeat center center;
        background-size: cover;
    }

    .mask-bottom {
        width: 100%;
        height: 80%;
        background: url('../img/mask/mask_bottom_desktop.webp') no-repeat center center;
        background-size: cover;
    }
}