@import"block-party.css";

.price-block {
    color: #fff;

}
.price-block {
    padding-top: 85px;
}
@media (min-width: 900px) {
    .price-block {
        padding-top: 185px;
    }
}
.price-block::before {
    content: "";
    width: 1433px;
    height: 1428px;
    border-radius: 50%;
    position: absolute;
    right: -32%;
    top: clamp(200px, 27vw, 310px);
    background: var(--color-2);
    z-index: -1
}

.price-block .title-1 {
    height: fit-content;
    font-size: clamp(40px, 16vw, 182px);
    font-weight: 600;
    letter-spacing: .2em;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    z-index: 2;
    margin-bottom: clamp(40px, 7vw, 88px)
}

.price-block .text {
    margin-bottom: 34px
}

.price-block .text-2 {
    font-size: clamp(20px, 2.1vw, 30px);
    margin-top: -52px;
    font-weight: 400
}

.price-block .text-2 a {
    color: #fff;
    font-weight: 600
}

.price-block .text p {
    margin-bottom: 16px
}

.price-block .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #fff;
    margin-bottom: clamp(72px, 9vw, 108px)
}

.price-block .items .item:nth-child(4n),
.price-block .items .item:last-child {
    border-right: 1px solid #fff
}

.price-block .item {
    padding: clamp(28px, 2.6vw, 32px) clamp(28px, 3.6vw, 46px);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(clamp(9px, 9vw, 10.5px));
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff
}

.price-block .item p {
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px
}

.price-block .item p:nth-child(1) {
    margin-bottom: clamp(20px, 1.9vw, 25px);
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 18px)
}

.price-block .item p:nth-child(2) {
    font-weight: 600;
    font-size: clamp(38px, 3.9vw, 45px);
    padding-bottom: clamp(33px, 2.9vw, 36px);
    border-bottom: 1px solid #fff;
    margin-bottom: clamp(10px, 1vw, 12px)
}

.price-block .item p:nth-child(2)::after {
    content: "руб.";
    font-weight: 600;
    font-size: clamp(16px, 1.3vw, 18px);
    margin-left: 5px
}

.price-block .item p:last-child {
    border-bottom: none
}

@media(max-width: 1500px) {
    .price-block::before {
        left: 54%;
        right: auto
    }
}

@media(max-width: 1000px) {
    .price-block .items {
        grid-template-columns: repeat(2, 1fr)
    }

    .price-block .items .item:nth-child(2n),
    .price-block .items .item:last-child {
        border-right: 1px solid #fff
    }
}

@media(max-width: 600px) {
    .price-block::before {
        height: 2342px;
        width: 2350px;
        left: 74%;
        top: -711px;
        background-color: #ab1d19
    }

    .price-block .items {
        grid-template-columns: 1fr;
        border-top: none;
        border-bottom: 1px solid #fff
    }

    .price-block .item {
        border-right: 1px solid #fff;
        border-top: 1px solid #fff
    }

    .price-block .item.active::after {
        transform: rotate(45deg);
        color: var(--color-2)
    }

    .price-block .item.active p {
        display: block
    }

    .price-block .item.active p:first-child {
        margin-bottom: clamp(20px, 1.9vw, 25px)
    }

    .price-block .item::after {
        content: "+";
        font-weight: 800;
        font-size: 20px;
        position: absolute;
        right: clamp(28px, 3.6vw, 46px);
        top: clamp(28px, 2.6vw, 32px);
        transition: color .18s ease-in-out, transform .18s ease-in-out
    }

    .price-block .item p {
        display: none
    }

    .price-block .item p:first-child {
        display: block;
        margin-bottom: 0;
        transition: margin .15s ease-in-out
    }
}

/*# sourceMappingURL=page-price.css.map */