.plus {
    position: absolute;
    z-index: 6;
    inset: 0;
    overflow: hidden;
}

.plus-blue {
    position: absolute;
    display: block;
    aspect-ratio: 1;
    height: auto;
    background: url("../../img/plus/plus_blue.svg") no-repeat center/contain;
}

.plus-pink {
    position: absolute;
    display: block;
    aspect-ratio: 1;
    height: auto;
    background: url("../../img/plus/plus_pink.svg") no-repeat center/contain;
}

.plus-pink-blur {
    position: absolute;
    display: block;
    aspect-ratio: 1;
    height: auto;
    background: url("../../img/plus/plus_pink_blur.svg") no-repeat center/contain;
}

.plus-blue::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center top,
        rgb(0 174 255 / 85%) 0%,
        rgb(105 222 255 / 35%) 52%,
        rgb(17 114 178 / 0%) 94%
    );
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(18px);
    pointer-events: none;
}

.plus-pink::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(
            ellipse at center top,
            rgb(255 0 225 / 69%) 0%,
            rgb(240 37 255 / 17%) 52%,
            rgb(178 17 157 / 0%) 94%
    );
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(18px);
    pointer-events: none;
}

.plus-blue::before {
    width: 175%;
    z-index: 1;
}

.plus-blue-top--mobile::before {
    width: 150%;
    opacity: 0.8;
    filter: blur(14px);
}

.plus-pink::before {
    width: 175%;
    z-index: 1;
}

.plus-pink-top--mobile::before {
    width: 150%;
    opacity: 0.8;
    filter: blur(14px);
}

.plus-pink-blur-bottom--desktop::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(
            ellipse at center top,
            rgb(255 0 225 / 69%) 0%,
            rgb(240 37 255 / 17%) 52%,
            rgb(178 17 157 / 0%) 94%
    );
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(18px);
    pointer-events: none;
}

@media (orientation: portrait) and (min-width: 0px) {
    .plus-blue-top--mobile {
        width: clamp(26px, min(15vw, 8svh), 66px);
        top: -1%;
        left: -3%;
    }

    .plus-blue-bottom--mobile {
        width: clamp(26px, min(18vw, 10svh), 94px);
        bottom: 4%;
        right: -1%;
    }

    .plus-pink-top--mobile {
        width: clamp(26px, min(28vw, 20svh), 140px);
        top: 27%;
        right: -3%;
    }

    .plus-pink-bottom--mobile {
        width: clamp(26px, min(24vw, 16svh), 100px);
        bottom: 2%;
        left: -6%;
        transform: rotate(55deg);
    }
}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    .plus-blue-top--mobile {
        width: clamp(26px, min(17vw, 13svh), 180px);
        top: -1%;
        left: -3%;
    }

    .plus-blue-bottom--mobile {
        width: clamp(26px, min(17vw, 13svh), 180px);
        bottom: 20%;
        right: 1%;
    }

    .plus-pink-top--mobile,
    .plus-pink-bottom--mobile {
        display: none;
    }

    .plus-pink-blur-top--tablet {
        width: clamp(26px, min(20vw, 14svh), 200px);
        top: 27%;
        right: 20%;
        transform: translateX(50%);
    }

    .plus-pink-blur-bottom--tablet {
        width: clamp(26px, min(20vw, 14svh), 200px);
        bottom: -1%;
        left: -6%;
        transform: rotate(5deg);
    }
}

@media (orientation: landscape) and (min-width: 0px) {
    .plus-blue-top--desktop {
        width: clamp(26px, min(20vw, 12svh), 220px);
        top: 7%;
        left: 25%;
        transform: translateX(-50%);
    }

    .plus-blue-bottom--desktop {
        width: clamp(26px, min(20vw, 12svh), 220px);
        top: 45%;
        right: 18%;
        transform: translateX(50%);
    }

    .plus-pink-bottom--desktop {
        width: clamp(26px, min(20vw, 12svh), 220px);
        top: 55%;
        left: 52%;
        transform: translateX(-50%);
    }

    .plus-pink-blur-bottom--desktop {
        width: clamp(26px, min(30vw, 22svh), 420px);
        top: -7%;
        right: 4%;
    }
}