.privilege__cards {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px
}

.privilege__card {
    position: relative;
    padding: 100px 20px 40px 60px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px
}

.privilege__card-num {
    line-height: 100%;
    position: absolute;
    top: 0;
    left: 10px;
    color: rgba(247, 138, 0, .30);
    font-size: 150px;
    font-family: var(--Oswald-regular)
}

.privilege__card-info {
    position: relative;
    z-index: 2
}

.privilege__card-title {
    margin-bottom: 20px
}

@media (max-width:767.98px) {

    .privilege__cards::after,
    .privilege__cards::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(circle at 50% 50%, rgba(247, 138, 0, .1) 0, rgba(247, 138, 0, .06) 35%, rgba(247, 138, 0, .03) 60%, rgba(247, 138, 0, 0) 90%);
        filter: blur(28px);
        opacity: 1;
        transform: translateZ(0);
        will-change: transform;
        -webkit-transform: translateZ(0)
    }

    .privilege__cards::before {
        right: -55%;
        top: 22%
    }

    .privilege__cards::after {
        left: -55%;
        top: 68%
    }

    .privilege__cards>* {
        position: relative;
        z-index: 1
    }
}

@media (max-width:768px) {
    .privilege__card:nth-child(2n) {
        background-color: #ffffff05;
        backdrop-filter: blur(10px)
    }
}

@media (min-width:768px) {

    .privilege::after,
    .privilege::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        opacity: 1
    }

    .privilege .privilege__cards {
        grid-template-columns: 1fr 1fr
    }

    .privilege__card:nth-child(2),
    .privilege__card:nth-child(3) {
        background-color: #ffffff05;
        backdrop-filter: blur(10px)
    }

    .privilege {
        position: relative;
    }

    .privilege::before {
        width: 650px;
        height: 650px;
        transform: translate(-50%, -50%) translateZ(0);
        -webkit-transform: translate(-50%, -50%) translateZ(0);
        background: radial-gradient(circle at 50% 50%, rgba(247, 138, 0, .09) 0, rgba(247, 138, 0, .055) 34%, rgba(247, 138, 0, .03) 58%, rgba(228, 31, 41, .012) 76%, rgba(247, 138, 0, 0) 92%);
        filter: blur(30px);
        -webkit-filter: blur(30px);
        will-change: transform
    }

    .privilege::after {
        width: 900px;
        height: 900px;
        transform: translate(-50%, -50%) translateZ(0);
        -webkit-transform: translate(-50%, -50%) translateZ(0);
        background: radial-gradient(circle at 50% 50%, rgba(247, 138, 0, .03) 0, rgba(247, 138, 0, .02) 40%, rgba(247, 138, 0, 0) 75%);
        filter: blur(60px);
        -webkit-filter: blur(60px)
    }

    .privilege__cards {
        position: relative;
        z-index: 1
    }
}

@media (min-width:1200px) {
    .privilege__card {
        display: flex;
        justify-content: end;
        align-items: end;
        padding: 40px;
        min-height: 300px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px
    }

    .privilege__card-num {
        position: absolute;
        top: 0;
        left: 30px;
        font-size: 250px
    }

    .privilege__card-info {
        max-width: 400px
    }
}