.projects-cards.all-pr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    justify-items: start;
}

.cards.all-pr-cards {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.cards-items {
    width: 100%;
}

.all-btn {
    padding: 0 10px 10px 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* .btn.all-pro {
    margin: 0 0 10px 10px;
} */

.view-all-cards {
    display: none;
}

.shapes
 {
    position: relative;
    width: 70px;
}

.react-right {
    height: 120px;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
    border-left: 1px solid var(--gray);
}
.react-left {
    height: 120px;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
    border-right: 1px solid var(--gray);
}

.hidden-shapes {
    position: absolute;
    width: 35px;
    display: none;
}

.dots-1 {
    margin-top: 240px;
}
.react-3 {
    margin-top: 640px;
}

.dots-5 {
    margin-top: 80px;
}

.react-7 {
    margin-top: 300px;
}

.dots-1 {
    margin-top: 120px;
}
.react-3 {
    margin-top: 340px;
}

.react-1 {
    left: 0;
    top: 460px;
}
.react-2 {
    left: 0;
    bottom: 400px;
}
.react-4 {
    right: 0;
    top: 1170px;
}
.dots-2 {
    left: 0;
    top: 960px;
}
.dots-3 {
    right: 0;
    top: 720px;
}
.dots-4 {
    right: 0;
    bottom: 20px;
}

.react-6 {
    left: 0;
    top: 520px;
}
.dots-8 {
    right: 0;
    top: 740px;
}

.dots-6 {
    left: 0;
    top: 960px;
}
.react-8 {
    right: 0;
    top: 1180px;
}
.react-5 {
    left: 0;
    top: 1400px;
}