/*POINTS*/
:root {
    --point-size: clamp(75px, calc(75px + (100vw - 641px) * 99 / 1279), 174px);
    --point-width: clamp(150px, calc(150px + (100vw - 641px) * 150 / 1279), 300px);
    --point-txt: clamp(12px, calc(12px + (100vw - 641px) * 13 / 1279), 25px);
}

#points-canvas {
    width: 100%;
    display: flex;
    justify-content: center;
}

.point {
    width: var(--point-width);
    background: rgba(0, 255, 0, 0.3);
    background-size: var(--point-size) !important;
    padding-top: var(--point-size);
    text-align: center;

}

#point-point {
    background: url('/expert2026/buy/img/point-block.png') top center no-repeat;
}

#point-clock {
    background: url('/expert2026/buy/img/point-clock2.png') top center no-repeat;
}

#point-dress {
    background: url('/expert2026/buy/img/point-dress2.png') top center no-repeat;
}

.point-txt {
    padding-top: calc(var(--point-size)/7);
    color: var(--gray-color);
}

.point-stxt {
    color: var(--orange-color);
}

@media (min-width:641px) {
    .point {
        margin: 0 calc(var(--point-width)/6);
    }

    .point-txt {
        font-size: var(--point-txt);
    }

    .point-stxt {
        font-size: calc(var(--point-txt)*0.9);

    }

    #points .line {
        margin-top: calc(var(--point-size)/2);
    }
}

@media (max-width:640px) {

    .point-txt {
        font-size: 18px;
    }

    .point-stxt {
        font-size: 18px;
    }

    .point {
        width: 300px;
        background-size: 140px;
        margin-top: calc(140px / 4);
    }

    .point:first-child {
        margin-top: 0;
    }

    #points-canvas {
        flex-direction: column;
        align-items: center;
        padding-top: calc(140px / 3);
    }

    #points .line {
        margin-top: calc(var(--point-size)/1.4);
    }

}

@media (max-width:350px) {
    .point {
        width: 100%;
    }

    .point {
        width: 50%;
        background-size: 50%;
    }
}

/*POINTS END*/